> ## 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-rn-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](/docs/web/data-visualization/bar-charts#rules-on-the-usage-of-stacked-bar-charts)
* Shared API / tooltips / palettes: [Chart component](/docs/kits/charts-react-native/chart)
* Plain bar / direct labels: [Bar](/docs/kits/charts-react-native/bar)

***

## 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.

```tsx theme={null}
const option: EChartsOption = {
  grid: { left: 48, right: 16, top: 24, bottom: 84 },
  legend: { bottom: 0 },
  xAxis: { type: "category", data: months },
  yAxis: { type: "value" },
  series: [
    { type: "bar", name: "Leads", stack: "total", data: […] },
    { type: "bar", name: "Booked", stack: "total", data: […] },
    { type: "bar", name: "Customers", stack: "total", data: […] },
  ],
};

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

***

## 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](/docs/kits/charts-react-native/chart#palette-utilities) and [Palettes](/docs/kits/charts-react-native/palettes).

***

## Tooltips

Pass `renderTooltip` to add tooltip content. See [Chart component](/docs/kits/charts-react-native/chart#tooltips).

```tsx theme={null}
import { Chart } from "@servicetitan/anvil2-rn-charts-kit";
import { TooltipSurface } from "@servicetitan/anvil2-rn";
import type { ChartTooltipInfo } from "@servicetitan/anvil2-rn-charts-kit";
import type { EChartsOption } from "@servicetitan/anvil2-rn-charts-kit";
import { Text, View } from "react-native";

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

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],
    },
  ],
};

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