total

Optional. Displays the sum of the values of the stacked series for each bar of a Bar or X-Bar chart, or the aggregated value of a series in the center of a Donut chart

Usage

total?: boolean | ((total: number) => string | number);

Parameters

The total property belongs to the root configuration of the chart rather than to a series and works with the "bar", "xbar" and "donut" chart types. It can take one of the following values:

false - the chart doesn't render the total values
true - the chart calculates the sum automatically and displays it in the default format:
- in a Bar or X-Bar chart, the sum of the values of the visible series stacked in each bar is displayed at the end of the bar (above the bar in a Bar chart and to the right of the bar in an X-Bar chart)
- in a Donut chart, the sum of the values of the visible sectors is displayed in the center of the chart
a callback function ((total: number) => string | number) - the chart calculates the sum and calls the function with the following parameter:
- total - (number) the sum calculated by the component:
  - in a Bar or X-Bar chart, the sum of the values of the visible series of the current bar
  - in a Donut chart, the sum of the values of the visible sectors
  and returns a string or a number that the chart displays at the end of the bar or in the center of the Donut chart

note

For Bar and X-Bar charts, the property takes effect only when the stacked property is enabled in at least one of the series. If a chart has several stack groups, the chart calculates the total separately for each group.

Default config

total: false

Example

Stacked Bar chart with total values
const chart = new dhx.Chart("chart_container", {
    type: "bar",
    total: true,
    scales: {
        bottom: { text: "month" },
        left: { max: 170 }
    },
    series: [
        { id: "A", value: "company A", fill: "#394E79", stacked: true },
        { id: "B", value: "company B", fill: "#5E83BA", stacked: true },
        { id: "C", value: "company C", fill: "#C2D2E9", stacked: true },
    ],
});
chart.data.parse(dataset);

Donut chart with total value
const chart = new dhx.Chart("chart_container", {
    type: "donut",
    total: true,
    series: [
        {
            value: "value",
            color: "color",
            text: "month",
        }
    ],
});
chart.data.parse(dataset);

Custom format of the total value

To change the way the total value looks, set the total property as a callback function. The chart calls the function with the calculated sum as a parameter and displays the returned string or number at the end of the bar in a Bar or X-Bar chart:

const chart = new dhx.Chart("chart_container", {
    type: "bar",
    total: (total) => `${total}$`,
    scales: {
        bottom: { text: "month" },
        left: { max: 170 }
    },
    series: [
        { id: "A", value: "company A", fill: "#394E79", stacked: true },
        { id: "B", value: "company B", fill: "#5E83BA", stacked: true },
        { id: "C", value: "company C", fill: "#C2D2E9", stacked: true },
    ],
});
chart.data.parse(dataset);

or in the center of a Donut chart:

const chart = new dhx.Chart("chart_container", {
    type: "donut",
    total: (total) => `${total}$`,
    series: [
        {
            value: "value",
            color: "color",
            text: "month",
        }
    ],
});
chart.data.parse(dataset);

Related samples:

Related articles:

Change log:

added in v9.4

Usage​

Parameters​

Default config​

Example​

Custom format of the total value​