Chart Component – Charts

Implementation
Chart Props
Selection Config
Tooltip Config
Tooltip Point Config

import {
  Chart,
  type EChartsOption,
} from "@servicetitan/anvil2-rn-charts-kit";

const option: EChartsOption = {
  xAxis: { type: "category", data: ["North", "South", "East", "West"] },
  yAxis: { type: "value" },
  series: [{ type: "bar", data: [1200, 980, 1450, 1100] }],
};

function ExampleComponent() {
  return (
    <Chart
      option={option}
      width={480}
      height={300}
      accessibilityLabel="Bar chart. Sales by region."
    />
  );
}

Common Examples

The Chart component renders an ECharts option with Anvil2 styling. Native charts require explicit dimensions because they do not have a CSS container to fill.The chart graphic is hidden from assistive technology. For supported option shapes, Chart exposes the data as a visually hidden list instead. Use accessibilityLabel for its heading; it falls back to option.title.text, then "Chart".Direct category-axis data for bar, line, and area series and direct pie or donut data are supported. Dataset transforms and other option shapes fall back to the accessible label. Charts render without ECharts animation.Chart defaults to appearance="light" and variant="monochrome". Set appearance to match the surrounding theme.

Tooltips

Pass renderTooltip to provide visual tooltip content. The chart controls placement and keeps a gap from the finger. When the plot is shorter than the tooltip, the gap wins and the tooltip extends outside the chart box. Tooltips are hidden from assistive technology because the data list exposes the values.

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

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

<Chart
  option={option}
  renderTooltip={renderTooltip}
  width={480}
  height={300}
  accessibilityLabel="Bar chart. Sales by region."
/>;

Omit renderTooltip when the chart does not need a tooltip. Format each value for its product context.

Selection

Selection is enabled by default for bars, segments, slices, line points, and area bands. A line drawn without point markers is not selectable. Tapping an area band selects its point at the nearest category. Selecting a mark changes it to the selection color and fades every other mark to 20% opacity. Select the active mark again or tap an empty plot area to clear it. VoiceOver and TalkBack users select the matching value in the data list.Omit selected to let Chart own selection. Use onSelectedChange to respond when the active mark changes. Pass both props to control selection from product state.Set selectedMode: false on a series that must not support selection.

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

const option: EChartsOption = {
  xAxis: { type: "category", data: ["North", "South", "East", "West"] },
  yAxis: { type: "value" },
  series: [{ type: "bar", data: [1200, 980, 1450, 1100] }],
};

function ExampleComponent() {
  const [selected, setSelected] = useState<ChartSelection | null>(null);

  function handleSelectedChange(info: ChartTooltipInfo | null) {
    const point = info?.points[0];
    setSelected(
      point
        ? {
            seriesIndex: point.seriesIndex,
            dataIndex: point.dataIndex,
          }
        : null,
    );
  }

  return (
    <Chart
      option={option}
      selected={selected}
      onSelectedChange={handleSelectedChange}
      width={480}
      height={300}
      accessibilityLabel="Bar chart. Sales by region."
    />
  );
}

Data point taps

Pass onDataPointClick to handle activation of a data mark. 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 identifies the category, and points[0] describes the mark. Taps on empty plot area, axis labels, legend entries, and the title are ignored, and a pinch never reports a mark. Omit the callback when the product does not need an additional tap action; values remain interactive for selection. Dataset transforms and other unsupported option shapes produce no list; onDataPointClick is not supported for those shapes.

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

function ExampleComponent() {
  const [selected, setSelected] = useState<ChartTooltipInfo | null>(null);

  return (
    <Chart
      option={option}
      width={480}
      height={300}
      accessibilityLabel="Bar chart. Sales by region."
      onDataPointClick={({ name, points }) => setSelected({ name, points })}
    />
  );
}

Hold the reported mark in state to open a Dialog, reveal a detail panel, or navigate. See Stacked bar for a segment-level example.

Palette utilities

Use variant when colors follow the palette’s index order. The variant applies fills, borders, patterns, markers, corner treatments, and hover behavior.

<Chart
  option={option}
  variant="categorical"
  width={480}
  height={300}
  accessibilityLabel="Line chart. Revenue by month."
/>

Use chartPalette when an option needs a specific palette entry. chartStepItemStyle converts monochrome and semantic steps into ECharts itemStyle values.

import {
  chartPalette,
  chartStepItemStyle,
} from "@servicetitan/anvil2-rn-charts-kit";

const palette = chartPalette("light", "semantic");

const option: EChartsOption = {
  series: [
    {
      type: "bar",
      data: [1200],
      itemStyle: chartStepItemStyle(palette.danger.primary),
    },
  ],
};

Consumer-defined itemStyle values override variant styling.

<Chart
  option={option}
  variant="monochrome"
  width={480}
  height={300}
  accessibilityLabel="Bar chart. Sales by region."
/>

`Chart` Props

number

required

Sets the chart height in pixels.

EChartsOption

required

Defines chart structure and data.

number

required

Sets the chart width in pixels.

string

Sets the heading for the visually hidden data list. Falls back to option.title.text, then "Chart".

"light" | "dark"

default:"light"

Sets the token appearance used by the chart theme.

(info: ChartTooltipInfo) => void

Handles activation of a data mark from a plot tap or from a value in the data list. Not supported when the option produces no list.

(info: ChartTooltipInfo | null) => void

Handles selection changes. Receives null when the active mark is cleared.

Renders visual-only content for the active data point.

ChartSelection | null

Controls the active mark. Omit this prop to let the chart own selection.

string | object

Replaces the chart theme with a registered theme name or inline theme object.

"monochrome" | "categorical"

default:"monochrome"

Applies an index-ordered palette and chart treatment.

import type { ChartSelection } from "@servicetitan/anvil2-rn-charts-kit";

`ChartSelection`

ChartSelection identifies one mark in option.series.

number

required

Identifies the value within the selected series data.

number

required

Identifies the selected series within option.series.

import type { ChartTooltipInfo } from "@servicetitan/anvil2-rn-charts-kit";

`ChartTooltipInfo`

renderTooltip receives the active category and its data points. onDataPointClick and onSelectedChange receive one activated mark in the same shape. onSelectedChange receives null when selection clears.

string

required

Identifies the active category or donut slice.

ChartTooltipPoint[]

required

Contains the active data point for each applicable series.

import type { ChartTooltipPoint } from "@servicetitan/anvil2-rn-charts-kit";

`ChartTooltipPoint`

ChartTooltipPoint describes one series value in a tooltip.

string | undefined

required

Provides the resolved color when the chart can represent it as a swatch.

number

required

Identifies the value within the series data.

number

required

Identifies the series within option.series.

string | undefined

required

Provides the series name when defined.

unknown

required

Provides the datum value for product-specific formatting.

​Common Examples

​Tooltips

​Selection

​Data point taps

​Palette utilities

​Chart Props

​ChartSelection

​ChartTooltipInfo

​ChartTooltipPoint

Common Examples

Tooltips

Selection

Data point taps

Palette utilities

`Chart` Props

`ChartSelection`

`ChartTooltipInfo`

`ChartTooltipPoint`