## Feature Examples

### Data
- description: Pass the chart values with `data` prop. Each item has a `label`, shown under its bar, and a `values` array of two numbers: the first is drawn at the bottom of the bar in the primary chart color and the second is stacked on top in the secondary color. The Y axis scales to the largest total. Keep labels short, they are truncated to the width of a bar.
- example:
```jsx
() => {
  const data = [
    { label: 'Q1 25', values: [1200, 800] },
    { label: 'Q2 25', values: [1450, 950] },
    { label: 'Q3 25', values: [1100, 1300] },
    { label: 'Q4 25', values: [1900, 1600] },
    { label: 'Q1 26', values: [1650, 1400] },
    { label: 'Q2 26', values: [1800, 1550] },
  ];

  return <StackedBarChart data={data} width={600} height={300} />;
};
```

### Tooltip
- description: Show details on hover with `tooltipTemplate` prop. It receives the hovered item with its `label` and `values` and returns the tooltip content. Without a template the bars have no tooltip. The chart has no legend, so use the tooltip to name the two values. Adjust the tooltip itself, for example `maxWidth` or `placement`, with `tooltipCommonProps` prop.
- example:
```jsx
() => {
  const data = [
    { label: 'Jan', values: [12400, 9800] },
    { label: 'Feb', values: [11900, 10600] },
    { label: 'Mar', values: [13700, 12100] },
    { label: 'Apr', values: [12800, 13400] },
    { label: 'May', values: [14200, 14900] },
    { label: 'Jun', values: [13600, 16300] },
  ];
  const formatNumber = (value) => value.toLocaleString('en-US');

  return (
    <StackedBarChart
      data={data}
      width={600}
      height={300}
      tooltipTemplate={({ label, values }) => (
        <Box direction="vertical">
          <Text size="small" weight="bold" light>
            {label} 2026
          </Text>
          <Text size="small" light>
            Desktop: {formatNumber(values[0])} sessions
          </Text>
          <Text size="small" light>
            Mobile: {formatNumber(values[1])} sessions
          </Text>
          <Text size="small" light>
            Total: {formatNumber(values[0] + values[1])} sessions
          </Text>
        </Box>
      )}
      tooltipCommonProps={{ maxWidth: '260px' }}
    />
  );
};
```

### Y axis format
- description: Format the Y axis ticks with `yAxisTickFormat` prop. It receives the raw value and the same value formatted with thousands separators, and returns the text to show. By default the formatted value is shown as is.
- example:
```jsx
() => {
  const data = [
    { label: 'Jan', values: [12400, 5600] },
    { label: 'Feb', values: [13800, 4900] },
    { label: 'Mar', values: [15200, 6300] },
    { label: 'Apr', values: [14600, 7100] },
    { label: 'May', values: [16900, 6800] },
    { label: 'Jun', values: [18300, 7400] },
  ];

  return (
    <StackedBarChart
      data={data}
      width={600}
      height={300}
      yAxisTickFormat={(rawValue, formattedValue) => `$${formattedValue}`}
    />
  );
};
```

### Dimensions
- description: Set the chart size in pixels with `width` and `height` props. The defaults are 900 by 350 pixels. Bars have a fixed width, so the chart draws only as many items as fit into `width` and drops the rest. The narrow chart below fits fewer months than the wide one.
- example:
```jsx
() => {
  const data = [
    { label: 'Jan', values: [420, 180] },
    { label: 'Feb', values: [380, 220] },
    { label: 'Mar', values: [510, 140] },
    { label: 'Apr', values: [460, 260] },
    { label: 'May', values: [590, 210] },
    { label: 'Jun', values: [640, 190] },
    { label: 'Jul', values: [610, 240] },
    { label: 'Aug', values: [680, 230] },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <StackedBarChart data={data} width={720} height={300} />
      <StackedBarChart data={data} width={420} height={240} />
    </StorybookComponents.Stack>
  );
};
```

### Margin
- description: Set the space around the plot area on each side in pixels with `margin` prop. The Y axis labels are drawn inside the left margin, so widen it when the ticks are long, for example values with a unit.
- example:
```jsx
() => {
  const data = [
    { label: 'Jan', values: [820000, 1150000] },
    { label: 'Feb', values: [760000, 1210000] },
    { label: 'Mar', values: [910000, 1340000] },
    { label: 'Apr', values: [870000, 1290000] },
    { label: 'May', values: [980000, 1420000] },
    { label: 'Jun', values: [1040000, 1510000] },
  ];

  return (
    <StackedBarChart
      data={data}
      width={640}
      height={300}
      margin={{ top: 30, right: 30, bottom: 30, left: 160 }}
      yAxisTickFormat={(rawValue, formattedValue) =>
        `${formattedValue} visitors`
      }
    />
  );
};
```

## Common Use Case Examples

### Revenue breakdown
- description: Place the chart in a card whose title names the metric, and use the tooltip to name the two stacked values, for example subscription and one-time revenue per month.
- example:
```jsx
() => {
  const data = [
    { label: 'Jan', values: [4200, 1800] },
    { label: 'Feb', values: [4600, 1500] },
    { label: 'Mar', values: [5100, 2300] },
    { label: 'Apr', values: [4900, 1700] },
    { label: 'May', values: [5600, 2100] },
    { label: 'Jun', values: [6200, 1900] },
    { label: 'Jul', values: [5800, 2600] },
    { label: 'Aug', values: [6500, 2200] },
  ];
  const formatCurrency = (value) => `$${value.toLocaleString('en-US')}`;

  return (
    <Card>
      <Card.Header
        title="Monthly App Revenue"
        subtitle="January to August 2026"
        suffix={<TextButton size="small">Learn more</TextButton>}
      />
      <Card.Divider />
      <Card.Content>
        <Box align="center">
          <StackedBarChart
            data={data}
            width={720}
            height={360}
            yAxisTickFormat={(rawValue, formattedValue) => `$${formattedValue}`}
            tooltipTemplate={({ label, values }) => (
              <Box direction="vertical">
                <Text size="small" weight="bold" light>
                  {label} 2026
                </Text>
                <Text size="small" light>
                  Subscriptions: {formatCurrency(values[0])}
                </Text>
                <Text size="small" light>
                  One-time purchases: {formatCurrency(values[1])}
                </Text>
                <Text size="small" light>
                  Total: {formatCurrency(values[0] + values[1])}
                </Text>
              </Box>
            )}
            tooltipCommonProps={{ maxWidth: '260px' }}
          />
        </Box>
      </Card.Content>
    </Card>
  );
};
```