> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stacked bar

> Stacked bar chart implementation for @servicetitan/anvil2-charts-kit.

A stacked bar chart shows part-to-whole relationships across categories, with the series sharing a `stack` key. The variables are the series, so `variant` assigns color per series index. Use `monochrome` for four or fewer series, and `categorical` for five or more.

* Design rules: [Bar charts — stacked](https://anvil.servicetitan.com/docs/data-visualization/bar-charts.md#rules-on-the-usage-of-stacked-bar-charts)
* Shared API / selection / tooltips / clicks / palettes: [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md)
* Plain bar / direct labels: [Bar](https://anvil.servicetitan.com/docs/charts/web/bar.md)

***

## Minimal option

The option matches a grouped bar chart, with `stack` set on every series in the stack. Set `stack` in the option, since stacking carries meaning. `variant` supplies the rest of the treatment.

charts-react-stacked-bar

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-stacked-bar?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Chart, type EChartsOption } from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";

function App() {
  const option: EChartsOption = {
    grid: { left: 48, right: 16, top: 24, bottom: 84 },
    legend: { bottom: 0 },
    xAxis: {
      type: "category",
      data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    },
    yAxis: { type: "value" },
    series: [
      {
        type: "bar",
        name: "Leads",
        stack: "total",
        data: [320, 332, 301, 334, 390, 330],
      },
      {
        type: "bar",
        name: "Booked",
        stack: "total",
        data: [220, 182, 191, 234, 290, 330],
      },
      {
        type: "bar",
        name: "Customers",
        stack: "total",
        data: [150, 232, 201, 154, 190, 330],
      },
    ],
  };

  return (
    <Chart
      option={option}
      variant="monochrome"
      width={480}
      height={320}
      accessibilityLabel="Stacked bar. Funnel stages by month."
    />
  );
}

export default App;
```

***

## Variant styling

`variant` applies the following treatment:

| Concern | Behavior |
| - | - |
| Color | Palette by series index. At four monochrome variables, the palest step moves to the stack base |
| Corner radius | The topmost segment of each stack, following orientation and sign |
| Segment gaps | Roughly 4px of separation cut from the fills |
| Hover | Series focus and blur |

Segment gaps apply only on the `variant` path, where the theme fills the stack. Composing with `chartPalette` and `chartStepItemStyle`, as a semantic palette does, leaves the segments touching. Separate them another way: borders on outlined steps usually suffice, and otherwise leave space in the data or layout. See [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md#palette-utilities) and [Palettes](https://anvil.servicetitan.com/docs/charts/web/palettes).

***

## Tooltips

Pass `renderTooltip` to add hover content. See [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md#tooltips).

charts-react-stacked-bar-tooltip

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-stacked-bar-tooltip?file=src/App.tsx)

```tsx lines expandable theme={null}
import {
  Chart,
  type ChartTooltipInfo,
  type EChartsOption,
} from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";
import { CartoTheme, Text, TooltipSurface } from "@servicetitan/anvil2-ai-kit";
// This file is most likely already in your workspace
import "@servicetitan/anvil2-ai-kit/styles.css";

function renderTooltip({ name, points }: ChartTooltipInfo) {
  return (
    <TooltipSurface
      content={
        <>
          <Text text={name} />
          {points.map((point) => (
            <Text
              key={point.seriesIndex}
              text={`${point.seriesName ? `${point.seriesName}: ` : ""}${String(point.value)}`}
            />
          ))}
        </>
      }
    />
  );
}

function App() {
  const option: EChartsOption = {
    grid: { left: 48, right: 16, top: 24, bottom: 84 },
    legend: { bottom: 0 },
    xAxis: {
      type: "category",
      data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    },
    yAxis: { type: "value" },
    series: [
      {
        type: "bar",
        name: "Leads",
        stack: "total",
        data: [320, 332, 301, 334, 390, 330],
      },
      {
        type: "bar",
        name: "Booked",
        stack: "total",
        data: [220, 182, 191, 234, 290, 330],
      },
      {
        type: "bar",
        name: "Customers",
        stack: "total",
        data: [150, 232, 201, 154, 190, 330],
      },
    ],
  };

  return (
    <CartoTheme>
      <Chart
        option={option}
        variant="monochrome"
        renderTooltip={renderTooltip}
        width={480}
        height={320}
        accessibilityLabel="Stacked bar. Funnel stages by month."
      />
    </CartoTheme>
  );
}

export default App;
```

***

## Data point clicks

Pass `onDataPointClick` to handle activation of a segment. Pointer users click the plot; keyboard and screen-reader users Tab to the data table and activate a value cell. The callback receives the same `ChartTooltipInfo` a tooltip does: `name` is the category the segment belongs to, and `points[0]` is the segment itself, carrying `seriesName`, `seriesIndex`, `dataIndex`, `value`, and `color`. Clicks that do not land on a segment are ignored. `onDataPointClick` is not supported when the option produces no table.

Hold the reported segment in state to open a Dialog, reveal a detail panel, or navigate.

charts-react-stacked-bar-click

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-stacked-bar-click?file=src/App.tsx)

```tsx lines expandable theme={null}
import {
  Chart,
  type ChartTooltipInfo,
  type EChartsOption,
} from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";
import { CartoTheme, Text } from "@servicetitan/anvil2-ai-kit";
// This file is most likely already in your workspace
import "@servicetitan/anvil2-ai-kit/styles.css";
import { useState } from "react";

function App() {
  const [selected, setSelected] = useState<ChartTooltipInfo | null>(null);
  const point = selected?.points[0];

  const option: EChartsOption = {
    grid: { left: 72, right: 16, top: 24, bottom: 84 },
    legend: { bottom: 0 },
    xAxis: { type: "value" },
    yAxis: { type: "category", data: ["North", "South", "East", "West"] },
    series: [
      {
        type: "bar",
        name: "Leads",
        stack: "total",
        data: [320, 332, 301, 334],
      },
      {
        type: "bar",
        name: "Booked",
        stack: "total",
        data: [220, 182, 191, 234],
      },
    ],
  };

  return (
    <CartoTheme>
      <Chart
        option={option}
        variant="monochrome"
        width={480}
        height={300}
        accessibilityLabel="Stacked bar. Funnel stages by region."
        onDataPointClick={({ name, points }) => setSelected({ name, points })}
      />
      <Text
        text={
          selected && point
            ? `${selected.name} · ${point.seriesName ?? "unnamed"} · ${String(point.value)}`
            : "Click a segment, or Tab to the data table and press Enter, to report its category and series."
        }
      />
    </CartoTheme>
  );
}

export default App;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.