Customize the position of multiple axes-FineReport Help Document

Last update： 2022-01-11

I. Overview

1. Problem description

Users encounter the following problems:

I want to have a horizontal axis and two vertical axes (y-axis) on my chart.
The y-axis is set to the left and right dimensions, such as one according to the number and one according to the percentage.
When the data units of several series in a chart are different, it is desirable to display different coordinate axes.

Series can be distinguished by adding Stacked and Axis and setting the color of the axis, as shown in the following image:

2. Idea to achieve

In the custom column chart properties panel, you can choose to add X-axis or Y-axis under Style > Axis, and then configure the corresponding relationship between the coordinate axis and the series at Style > Series > Stacked and Axis.

Note: Not all charts support Stacking and Axis, only custom charts can, such as custom column chart, custom bar chart, custom line chart and so on.

II. Examples

1. Data preparation

Click File > New General Reportin the upper left corner of the designer, and add a built-in dataset Weather, which records the relationship between Month, Rainfall, Sea-LevelPressure and Temperature. As shown below:

2.1.png

2. Design report

1) Set the paper size

In this example, there are 12 categories, and each category contains 3 series. In order not to be displayed in pages when the chart is displayed, it is necessary to increase the paper size in Template > Page Setup. As shown below:

2) Insert a chart

Merge a piece of cells and insert Column Chart > Custom, as shown below:

3. Designing a column chart

Select the chart and click Cell Element in the properties panel on the right to set various properties of the chart: type, Data , Style , and Special effects .

1) Chart Types

Select the cell where the chart is located, and click Cell Element > Typeon the right to view and select the chart type.

Note: In the column chart, only the custom column chart has the stacking axis, and the other three column charts do not have this setting item

2.2.png

2) Binding data

The binding chart data is shown in the following figure:

Among them, Rainfall is series 1, Sea-LevelPressure is series 2, and Temperature is series 3.

2.22.png

3) Setting the style

Set the title of the chart to Multi-Axis Customization and the position to Left.

Set the position of Style > Legendto Top > Align

Set Style > Axis, and add two Y-axes, Y-axis 2 and Y-axis 3.

After adding the Y axis at the coordinate axis, set Style > Series, add two Stack and Axisat the stack and coordinate axis, double-click the name to rename it to Y2 and Y3. As shown below:

In this example, series 2 needs to correspond to Y-axis 2, series 3 needs to correspond to Y-axis 3, and series 1 does not need to be set, and the default corresponds to Y-axis.

Y-axis 2: When the setting condition is Series number equal to '2', Y-axis 2 is used.

Note: Stack in the configuration can be used with two or more series in the condition, which has no effect in this example.

Y-axis 3: When the setting condition is Series number equal to '3', Y-axis 3 is used.

After the previous step is completed, the coordinate axis corresponding to the series has been set. However, because the data of each Y-axis is different, we need to customize the maximum and minimum values for each Y-axis for obvious comparison; and in order to distinguish each coordinate axis, we need to set the font color of each Y-axis.

Y axis: The axis title needs to be displayed, and the color of the axis title and axis label is set to the same Blue as series 1. The specific settings are shown in the following figure:

Note: The unit mm in the Y-axis label format needs to be entered manually, and the same is true for Y-axis 2 and Y-axis 3.

Y-axis 2: Set the color of the axis title and axis labels to the same Greenas series 2, and set their position to Right. The specific settings are shown in the following figure:

Y-axis 3: Set the color of the axis title and axis labels to the same Yellow as series 3, and set their position to Right. The specific settings are shown in the following figure: