Custom Label as the Series Sum

Version

Expected Effect

In stacked column charts or stacked bar charts, multiple series under a single category are stacked to form a single column or bar for display. In such cases, labels are displayed directly, with the label of each series shown separately, as shown in the following figure.

However, you may often need to display only one summary value for a stacked column or bar. The following figure shows the expected effect.

Implementation Method

Select Custom for chart label content and use JavaScript codes to achieve a summary display of labels.

Template Opening

This example uses the completed template in Stacked Column Chart.

Alternatively, you can download the example template Stacked Column Chart.cpt. Choose File > Open in the upper left corner of the designer to open the template.

Chart Design

1. Title Modification

Select the chart, choose Cell Element > Style > Title, enter Summary Display of Series Labels by Category, and set Position to left, as shown in the following figure.

2. Custom Chart Label

Select the chart, choose Cell Element > Style > Label, tick Use Label, select Custom for Content, and enter the following code:

Note:

The summary value of the following code is the sum of all series values, and is displayed at the position of the last series.

function sumLabel(){
  const point = this;
  const points = point.points;
  const validPoints = points.filter( (point) => point.isVisible() );
  if(point == validPoints[validPoints.length - 1])
  //validPoints.length specifies how many series exist in a category. validPoints.length - 1 is used to display the summary value on the top (last series).
  // To display the summary value at the bottom, use validPoints.length - 5.
   {
    let value = 0;
    for(let i = 0; i < validPoints.length; i++) //All series in the same category are summarized.
    // If i<validPoints.length-2 is used, the first three series from the bottom up in this example are summarized.
    {
      value += validPoints[i].value;
    }
    return value;
  } else {
    return "";
  }
}
Show Code

Customize the style of label characters and set Position to Outside, as shown in the following figure.

Effect Display

1. PC

Save the report and click Pagination Preview. The effect is the same as in section "Expected Effect."

2. Mobile Terminal

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

Expected Effect

This example briefly explains the setting of combination charts. The following figure shows the expected effect.

The stacked column chart displays summary values on its labels, while the line chart does not display any labels.

Template Opening

This example uses the completed template in Stacked Column Chart-Line Chart. 

Alternatively, you can download the example template Stacked Column Chart - Line Chart.cpt. Choose File > Open in the upper left corner of the designer to open the template.

Custom Chart Label

Select the chart, choose Cell Element > Style > Label on the right property panel, select Column Chart, and tick Use Label. Enter the following custom input codes:

Note:

The summary value of the following code is the sum of the values of the first two series counted from the bottom up, and is displayed at the position of the second-to-last series.

function sumLabel(){
  const point = this;
  const points = point.points;
  const validPoints = points.filter( (point) => point.isVisible() );
  validPoints.length - 2]) //The summary value for the second-to-last series is displayed.
  {
    let value = 0;
    for(let i = 0; i < validPoints.length-1; i++)//The summary value includes the values of the first two series counted from the bottom up.
    {
      value += validPoints[i].value;
    }
    return value;
  } else {
    return "";
  }
}
Show Code

Customize the style of label characters and set Position to Inside, as shown in the following figure.

Effect Display

1. PC

Save the report and click Pagination Preview. The effect is the same as in section "Expected Effect."

2. Mobile Terminal

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

1. Stacked Column Chart

For details, you can download the example template: Customizing Labels as Series Sum.cpt.

2. Combination Chart

For details, you can download the example template: Series Summary by Category for a Stacked Column - Line Chart.cpt.