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

Data point taps

Pass onDataPointClick to handle activation of a segment. Pointer users tap the plot; VoiceOver and TalkBack users activate the matching value in the data list. 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. Taps that do not land on a segment are ignored, and a pinch never reports a mark. onDataPointClick is not supported when the option produces no list. Hold the reported segment in state to open a Dialog, reveal a detail panel, or navigate. See Chart component.

import {
  Chart,
  type ChartTooltipInfo,
  type EChartsOption,
} from "@servicetitan/anvil2-rn-charts-kit";
import { useState } from "react";
import { Text, View } from "react-native";

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

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

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

​Minimal option

​Variant styling

​Tooltips

​Data point taps

Minimal option

Variant styling

Tooltips

Data point taps