Chart with Custom Multiple Axes

Version

Problem Description

When you encounter the following problems:

You want your chart to contain one horizontal axis and two vertical axes (two Y axes).

You want the Y axis to have two dimensions on the left and right, for example, one by number and the other by percentage.

You want the several series (with different units) of a chart to be sidplayed on different axes.

You can add Stack and Axis and set axis colors to distingush the series, as shown in the following figure.

Implementation Method

You can add X Axis or Y Axis under Style > Axis on the attribute panel of a custom column chart, and map axex to series under Style > Series > Stack and Axis.

Note: 

Stack and Axis are available to custom charts and some combination charts such as custom column charts, custom bar charts, custom line charts, and column combined chart and line charts.

Data Preparation

Choose File > New General Report from the upper left of the designer, and create a built-in dataset named Weather which records the relationship between Month, Rainfall, Sea-Level Pressure, and Temperature as shown in the following figure.

Report Design

Paper Size Setting

To display the chart containing12 categories (each of which contains 3 series) on one page in this example, you need to enlarge the paper size under Template > Paper Setting, as shown in the following figure.

Chart Insertion

Merge required cells and choose Column Chart > Custom, as shown in the following figure.

Column Chart Design

Select the chart, click Cell Element on the right attribute 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.

Note: 

Stack and Axis is available only for custom column charts and unavailable for other three types of column charts.

Data Binding

Bind the data to the chart, as shown in the following figure.

Select Rainfall as Series1, Sea-Level Pressure as Series2, and Temperature as Series3.

Style Setting

1. Set the chart title to Custom Multiple Axes, and select the first option (namely left) in Position.

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

3. Choose Style > Axis and add two Y axes (Y Axis2 and Y Axis3).

4. After adding the Y axes, choose Style > Series, add two Stack and Axis items, and rename them YAxis2 and YAxis3 respectively, as shown in the following figure.

In this example, you need to map Series2 to Y Axis2 and Series3 to Y Axis3, and remain the default mapping between Series1 and Y Aixs. 

Y Axis2: Add the condition Series Index Equal to "2".

Note: 

Stacked in Configuration can take effect when at least two series are included in the condition and affect nothing in this example.

Y Axis3: Add the condition Series Index Equal to "3".

5. Ensure that you have finish all the above steps. Then the axes corresponding to the series have been configured. However, to obviously distinguish each Y axis with different data records, you need to set Custom Minimum Value and Custom Maximum Value for each Y axis and set the font color for each Y axis.

Y Axis: You need to display the axis title, and set the colors of the axis title and the axis label to the same blue as series 1. The following figure shows the specific setting.

Note: 

You need to manually enter the unit mm in Axis Label Format for Y Axis, Y Axis2 and Y Axis3 respectively.

Y Axis2: You need to set the colors of the axis title and the axis label to the same green as series 2, and set Axis Label Position to Right. The following figure shows the specific setting.

Y Axis3: You need to set the colors of the axis title and the axis label to the same yellow as series 2, and set Axis Label Position to Right. The following figure shows the specific setting.

Effect Display

Save the report and click Pagination Preview. The following figure shows the preview effect.

The report can be previewed on the DataAnalyst app and HTML5 terminal.

For details, you can download the template Column Chart with Custom Multiple Axes.cpt