Stacked bar – Charts - React Native

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
Shared API / tooltips / palettes: Chart component
Plain bar / direct labels: 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.

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 and Palettes.

Tooltips

Pass renderTooltip to add tooltip content. See Chart component.

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."
/>;

Last modified on August 20, 2026

⌘I