Chart Component – Charts

Implementation
Chart Props
Tooltip Config
Tooltip Point Config

Common Examples

The Chart component renders an ECharts option with Anvil2 styling. Import EChartsOption from the kit to keep chart configuration on the supported public API.

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

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}
      accessibilityLabel="Bar chart. Sales by region."
    />
  );
}

Chart defaults to appearance="light" and variant="monochrome". Set appearance to match the surrounding theme.The chart graphic is hidden from assistive technology. For supported option shapes, Chart exposes the data as a visually hidden table instead. Use accessibilityLabel for its caption; 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.

Tooltips

Pass renderTooltip to provide visual tooltip content. The chart controls placement and keeps the tooltip within the plot. Tooltips are hidden from assistive technology because the table exposes the values.Omit renderTooltip when the chart does not need a tooltip. Format each value for its product context.

Data point clicks

Pass onDataPointClick to handle activation of a data mark. Pointer users click the plot; keyboard and screen-reader users Tab to the data table and activate a value cell. The callback receives the same ChartTooltipInfo a tooltip does: name identifies the category, and points[0] describes the mark. Clicks on empty plot area, axis labels, legend entries, and the title are ignored. Omit the callback and the table stays read-only, so Tab skips the chart. Dataset transforms and other unsupported option shapes produce no table; onDataPointClick is not supported for those shapes.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" />

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-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}
  accessibilityLabel="Bar chart. Sales by region."
  variant="monochrome"
  width={480}
  height={300}
/>

`Chart` Props

EChartsOption

required

Defines chart structure and data.

string

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

"light" | "dark"

default:"light"

Sets the token appearance used by the chart theme.

string

Applies sizing or layout styles that pixel dimensions cannot express. width and height take precedence.

number

Sets an explicit height in pixels. The fluid default uses the parent height or a 300px minimum.

(info: ChartTooltipInfo) => void

Handles activation of a data mark from a plot click or from a value cell in the data table. Not supported when the option produces no table.

Renders visual-only 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.

number

Sets an explicit width in pixels. The fluid default fills the container width.

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

`ChartTooltipInfo`

renderTooltip receives the active category and its data points. onDataPointClick receives the clicked mark in the same shape, with a single point.

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

​Data point clicks

​Palette utilities

​Chart Props

​ChartTooltipInfo

​ChartTooltipPoint

Common Examples

Tooltips

Data point clicks

Palette utilities

`Chart` Props

`ChartTooltipInfo`

`ChartTooltipPoint`