Proportion Column Chart

Application Scenario

When the data from one column chart contains the data from another one, it is desired that the columns of the two series can overlap to show the proportion relationship between the two series intuitively.

For example, a column chart has two series: Amount Payable and Shipping Fee. Shipping Fee is contained in Amount Payable. Now, the columns of the two series can overlap to intuitively show the proportion of Shipping Fee to Amount Payable, as shown in the following figure.

Function Description

Choose Style > Series, and set Series Gap as -100, then all series can overlap, as shown in the following figure.

Data Preparation

Create a built-in data set named Embedded1. The following figure shows the fields and data.

Chart Insertion

Merge required cells, and insert a column chart, as shown in the following figure.

Data Binding

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

Title Adding

Add the title Proportion Column Chart to the column chart. Select left for Position and set the Character style as shown in the following figure.

Columns Overlapping

Choose Style > Series of the column chart and set Series Gap to -100, as shown in the following figure.

Label Customizing

Choose Special Effect > Condition Display, add Conditional Attribute, select Label for Attribute, and customize Text and Style as shown in the following figure.

The JavaScript codes are as follows:

function(){ 
 var result=(this.points[1].value/this.points[0].value*100).toFixed(2);
 result=result+"%";
 return result}

Effect Display

PC

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

Mobile Terminal

The function is also supported on APP and H5 terminals, as shown in the following figure.

For details, you can click to download the template Proportion Column Chart.cpt.