[charts] Add demo for displaying the sum of all values from the stacked series on top of the stacked bars

docs/data/charts/bars/StackTotalLabels.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { ChartsContainer } from '@mui/x-charts/ChartsContainer';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { useBarSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
+import { styled } from '@mui/material/styles';
+
+export default function StackTotalLabels() {
+  return (
+    <ChartsContainer
+      xAxis={[{ scaleType: 'band', data: ['Q1', 'Q2', 'Q3'] }]}
+      series={[
+        {
+          type: 'bar',
+          id: 'a',
+          stack: 'total',
+          data: [5, 17, 11],
+          barLabel: 'value',
+        },
+        { type: 'bar', id: 'b', stack: 'total', data: [4, 8, 6], barLabel: 'value' },
+      ]}
+      height={400}
+      yAxis={[{ width: 30 }]}
+      margin={{ left: 0, right: 10, top: 30 }}
+    >
+      <BarPlot />
+      <StackTotals />
+      <ChartsXAxis />
+      <ChartsYAxis />
+    </ChartsContainer>
+  );
+}
+
+function StackTotals() {
+  const xScale = useXScale();
+  const yScale = useYScale();
+  const barSeries = useBarSeries();
+
+  const categories = xScale.domain();
+  const bandWidth = xScale.bandwidth();
+
+  return (
+    <React.Fragment>
+      {categories.map((category, dataIndex) => {
+        const total = barSeries.reduce(
+          (acc, series) =>
+            acc + (series.stack === 'total' ? (series.data[dataIndex] ?? 0) : 0),
+          0,
+        );
+
+        const cx = (xScale(category) ?? 0) + bandWidth / 2;
+        const cy = yScale(total) ?? 0;
+
+        return (
+          <TotalLabel key={String(category)} x={cx} y={cy - 8}>
+            {total}
+          </TotalLabel>
+        );
+      })}
+    </React.Fragment>
+  );
+}
+
+const TotalLabel = styled('text')(({ theme }) => ({
+  ...theme?.typography?.body2,
+  fontWeight: 600,
+  stroke: 'none',
+  fill: (theme.vars || theme)?.palette?.text?.primary,
+  dominantBaseline: 'central',
+}));

docs/data/charts/bars/StackTotalLabels.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { ChartsContainer } from '@mui/x-charts/ChartsContainer';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { useBarSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
+import { styled } from '@mui/material/styles';
+
+export default function StackTotalLabels() {
+  return (
+    <ChartsContainer
+      xAxis={[{ scaleType: 'band', data: ['Q1', 'Q2', 'Q3'] }]}
+      series={[
+        {
+          type: 'bar',
+          id: 'a',
+          stack: 'total',
+          data: [5, 17, 11],
+          barLabel: 'value',
+        },
+        { type: 'bar', id: 'b', stack: 'total', data: [4, 8, 6], barLabel: 'value' },
+      ]}
+      height={400}
+      yAxis={[{ width: 30 }]}
+      margin={{ left: 0, right: 10, top: 30 }}
+    >
+      <BarPlot />
+      <StackTotals />
+      <ChartsXAxis />
+      <ChartsYAxis />
+    </ChartsContainer>
+  );
+}
+
+function StackTotals() {
+  const xScale = useXScale<'band'>();
+  const yScale = useYScale();
+  const barSeries = useBarSeries();
+
+  const categories = xScale.domain();
+  const bandWidth = xScale.bandwidth();
+
+  return (
+    <React.Fragment>
+      {categories.map((category, dataIndex) => {
+        const total = barSeries.reduce(
+          (acc, series) =>
+            acc + (series.stack === 'total' ? (series.data[dataIndex] ?? 0) : 0),
+          0,
+        );
+
+        const cx = (xScale(category) ?? 0) + bandWidth / 2;
+        const cy = yScale(total) ?? 0;
+
+        return (
+          <TotalLabel key={String(category)} x={cx} y={cy - 8}>
+            {total}
+          </TotalLabel>
+        );
+      })}
+    </React.Fragment>
+  );
+}
+
+const TotalLabel = styled('text')(({ theme }) => ({
+  ...theme?.typography?.body2,
+  fontWeight: 600,
+  stroke: 'none',
+  fill: (theme.vars || theme)?.palette?.text?.primary,
+  dominantBaseline: 'central',
+}));

docs/data/charts/bars/bars.md

@@ -219,6 +219,15 @@ The example below positions the labels above the bars they refer to.
 
 {{"demo": "LabelsAboveBars.js"}}
 
+### Stack total labels
+
+The `barLabel` property only has access to a single bar, so it can't display a stack's total.
+To show it, render a custom component as a child of the chart container.
+
+The example below sums the series with the [`useBarSeries`](/x/react-charts/hooks/) hook and positions each total with the [`useXScale`](/x/react-charts/hooks/) and [`useYScale`](/x/react-charts/hooks/) scales.
+
+{{"demo": "StackTotalLabels.js"}}
+
 ## Click events
 
 Bar charts provide two click handlers: