Column Chart-Line Chart

Version

Application Scenario

The column chart-line chart is a combination chart that combines a column chart and a line chart. The column chart-line chart is often used to show indicators such as the quantity and frequency in a dimension simultaneously, for example, the Pareto chart.

The Pareto chart sorts quality problems and quality improvement projects according to their importance, following the 80/20 rule (or the Pareto Principle). 

For example, you can start with the first three items to improve employee turnover, as shown in the Pareto chart below.

Chart Feature

Advantage: Simple and intuitive, the chart is not only suitable for comparing the differences among data of various groups, but also for datasets where trends are more important than individual data points

Disadvantage: The chart is not suitable for large datasets.

This document takes the Pareto Chart shown in section "Application Scenario" as an example to introduce the application of the column chart-line lhart in FineReport.

Data Preparation

Choose File > New General Report in the upper left corner of the designer, and create a built-in dataset named Resignation Reason Analysis, as shown in the following figure.

Chart Insertion

Merge required cells, click the Insert Chart icon on the upper toolbar, and choose Combination Chart > Column Chart-Line Chart, and click OK, as shown in the following figure.

Chart Design

Select the chart, click the Cell Element icon on the right property panel, and set the attributes (Type, Data, Style, and Special Effect) for the chart.

Chart Type

Select the cell where the chart is located and choose Cell Element > Type to view and select the chart type.

Data Binding

You need to bind data to the column chart and the line chart respectively in the combination chart, as shown in the following figure.

Style Setting

1. Select the chart, choose Cell Element > Style > Title, enter Resignation Reason Analysis in Text, and set the Position to the Left.

2. Choose Style > Legend, and set Position to the Top.

3. Choose Style > Label, and set the column chart and the line chart respectively.

Column Chart

Line Chart: As the proportions in the dataset are shown by decimals, you need to tick Value for Text, and select Percentage as the Format.

4. Choose Style > Series, and set settings of the series for the two charts respectively except the color scheme of the series which is only determined by the series.

Note 1: 

If you want to change the color of the line or the columns individually in the combination chart, you can change the color in the color scheme, or you can choose Special Effect > Condition Display to change the color of the series.

Note 2: 

The color scheme is set to Theme by default. For more details about the theme, see Template Theme Management.

Column Chart

Line Chart

From the settings of the series, you can see that Stack and Axis is set to Y Axis for the column chart, and Y Axis 2 for the line chart by default.

Note: 

You can set the same Y axis for two charts as needed. If a chart contains more than one series, you can also set different Y axes for different series in the chart.

5. Choose Style > Axis, and you can see X Axis, Y Axis, and Y Axis 2. You can click the xxx icon on the right to add a new axis. For details, see Chart Axis.

In this example, only set Y Axis and Y Axis2: 

Y Axis: Tick Custom Maximum Value, and set Maximum to 250 to present data more clearly and attractively.

Y Axis2: The real maximum of Y Axis 2 should be 1 or 100%, and set the maximum to 1.1 to present a better-looking chart. Besides, as the axis label is displayed as decimals, you need to select Percentage as Axis Label Format.

6. Choose Style > Background > Drawing Area, and set Gridline to None.

Effect Display

PC

Save the report and click Pagination Preview. The section "Application Scenario" shows the effect.

Mobile Terminal

The report can be previewed on both the DataAnalyst app and the HTML5 terminal. The following figure shows the effect.

For details, you can download the template Pareto Chart.cpt