Custom Tooltips as Series Sum

Version

Expected Effect

In the document Custom Label as the Series Sum, each column is topped with the sum of series values under one category in a stacked column chart. This document will describe how to achieve a similar effect by tooltip, that is, the sum of series values is displayed as a tooltip when youo hover your cursor  over a top series and the respective series values are displayed as tooltips when you hover your cursor over other series. The following figure shows the expected effect.

Implementation Method

You can select Custom for chart tooltip content and use JavaScript codes to achieve the expected result.

Template Opening

Download the template Custom Tooltips as Series Sum.cpt. Choose File > Open in the upper left corner of the designer to open the template.

Report Design

Chart Title Modification

Select the chart, choose Cell Element > Style > Title, and change the title to Custom Tooltip - Series Summary by Category, as shown in the following figure.

Chart Label Deselection

Select the chart, choose Cell Element > Style > Label, and deselect Use Label, as shown in the following figure.

Chart Tooltip Setting

Select the chart, choose Cell Element > Style > Prompt, select Custom, and enter the following code:

function sumOfPoints() {
  const point = this;
  const points = this.points;
  const len = points.length;
  if (point == points[len - 1]) {
  // points.length specifies how many series exist in one category. len - 1 is used to display the summary value on the top（last series）.
  // To display the summary value at the bottom, use len – 5.
    let sum = 0;
    for (let i = 0; i < len; i++) { //Summarize all series in the same category.
    // If i < len-2, the first three series from the bottom up are summarized in this example.
      if (point.isVisible()) {
        sum += points[i].value;
      }
    }
return sum;
  }
  return point.value;
}
Show Code

The following figure shows the setting.

Effect Display

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

Note:

During tooltip customization, only the value of the first series is displayed as the tooltip on mobile terminals by default.

For details, you can download the template Custom Tooltips as Series Sum.cpt.