ColumnChart.mdx

import { ControlsWithNote, DocsHeader, Footer } from '@sb/components'; import { Canvas, Meta } from '@storybook/addon-docs/blocks'; import TooltipStory from '../../resources/TooltipConfig.mdx'; import LegendStory from '../../resources/LegendConfig.mdx'; import NormalizedStackedChartStory from '../../resources/NormalizedStackedChart.mdx'; import * as ComponentStories from './ColumnChart.stories';

Example

Properties

More Examples

With custom color

With Secondary Dimension

With Stacks

With Formatter

Loading Placeholder

With Reference Line

You can set a reference line to any value by using the referenceLine chartConfig property. referenceLine accepts all properties described here, but it's recommended to only use label,value and color to preserve the intended design.

<ColumnChart
  {...props}
  chartConfig={{
    referenceLine: {
      color: 'red',
      label: 'MAX',
      value: 650
    }
  }}
/>

With Highlighted Measures

With Stack Aggregate Totals

You can display a total label at the top of each stacked column group by setting chartConfig.showStackAggregateTotals to true. The tooltip includes the total automatically when only a single column per dimension is present.

With Custom Tooltip Total

When multiple columns per dimension are present (e.g. stacked + standalone), the built-in tooltip total is not available. You can provide a custom tooltip via the tooltipConfig.content prop to display a total for specific measures.

import { ThemingParameters } from '@ui5/webcomponents-react-base';
import { DefaultTooltipContent } from 'recharts';

const stackedAccessors = new Set(['users', 'sessions']);

const CustomTooltipContent = (props) => {
  const { payload, ...rest } = props;
  if (!payload?.length) {
    return <DefaultTooltipContent {...rest} payload={payload} />;
  }
  const stackedEntries = payload.filter((entry) => stackedAccessors.has(entry.dataKey));
  if (!stackedEntries.length) {
    return <DefaultTooltipContent {...rest} payload={payload} />;
  }
  const total = stackedEntries.reduce((sum, entry) => sum + (Number(entry.value) || 0), 0);
  const augmentedPayload = [
    ...payload,
    {
      name: `Total (${stackedEntries.map((entry) => entry.name).join(' + ')})`,
      value: total,
      color: ThemingParameters.sapTextColor,
    },
  ];
  return <DefaultTooltipContent {...rest} payload={augmentedPayload} />;
};

<ColumnChart
  {...props}
  tooltipConfig={{
    content: <CustomTooltipContent />
  }}
/>

;