Chart Component – Charts

Implementation
Chart Props
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.Set accessibilityLabel to describe the chart for VoiceOver and TalkBack. The drawing surface does not expose accessible children.Chart defaults to appearance="light" and variant="monochrome". Set appearance to match the surrounding theme.

Tooltips

Pass renderTooltip to provide tooltip content. The chart controls placement and keeps the tooltip within the plot.

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
      accessibilityLabel={name}
      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.

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

Describes the chart for VoiceOver and TalkBack.

"light" | "dark"

default:"light"

Sets the token appearance used by the chart theme.

Renders content for the active data point.

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 { ChartTooltipInfo } from "@servicetitan/anvil2-rn-charts-kit";

`ChartTooltipInfo`

renderTooltip receives the active category and its data points.

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

​Palette utilities

​Chart Props

​ChartTooltipInfo

​ChartTooltipPoint

Common Examples

Tooltips

Palette utilities

`Chart` Props

`ChartTooltipInfo`

`ChartTooltipPoint`