# Stacked Bar Chart

> Bars split into parts of a whole per period, with a hover tooltip and legend.

Component · Charts · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/StackedBarChart/)

Bars split into parts of a whole per period, with a hover tooltip and legend.

Props: `labels`, `series` ({name, tint, values}), `height`, `width`, `barWidth`, `format(v)`, `legend` (false hides), `label`.

- Three series at most, ordered bottom-up from the steadiest to the most volatile.
- Segments use the tints' `-ink` colors with a 2px gap, so neighbours differ in lightness, not hue alone.
- Hovering a period dims the others and shows totals per series, top series first.

## Example

```tsx
import { StackedBarChart } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div className="tf-panel">
      <div>
        <h3 className="tf-panel-title">Revenue by plan</h3>
        <p className="tf-panel-sub">Hover a bar for the split</p>
      </div>
      <StackedBarChart
        height={180}
        labels={["Nov", "Dec", "Jan", "Feb", "Mar", "Apr"]}
        format={(v) => "€" + (v / 1000).toFixed(1) + "k"}
        series={[
          {
            name: "Starter",
            tint: "sky",
            values: [3100, 3400, 3300, 3900, 4200, 4500],
          },
          {
            name: "Team",
            tint: "mint",
            values: [9800, 10400, 11200, 11900, 12800, 13600],
          },
          {
            name: "Business",
            tint: "lilac",
            values: [5200, 5900, 6100, 6600, 7400, 8100],
          },
        ]}
      />
    </div>
  );
}
```

## Props

### StackedBarChart

| Prop | Type | Notes |
| --- | --- | --- |
| `labels` | `string[]` | Required |
| `series` | `Series[]` | Required |
| `height?` | `number` |  |
| `width?` | `number` |  |
| `barWidth?` | `number` |  |
| `format?` | `(v: number) => string` |  |
| `legend?` | `boolean` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |