> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart Component

> Implement the Chart component from @servicetitan/anvil2-rn-charts-kit.

<Tabs>
  <Tab title="Implementation">
    ```tsx theme={null}
    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.

    ```tsx theme={null}
    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.

    ```tsx theme={null}
    <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.

    ```tsx theme={null}
    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.

    **Agent guidance**

    * Define chart structure and data in the ECharts `option`.
    * Import `EChartsOption`, chart types, and palette utilities from `@servicetitan/anvil2-rn-charts-kit`.
    * Set `width`, `height`, and `accessibilityLabel` on every chart.
    * Use `variant` when colors follow palette order.
    * Use `chartPalette` and `chartStepItemStyle` only when the option requires a specific palette entry.
    * Do not hard-code Anvil colors, borders, decals, marker shapes, or bar radii.
    * Do not add an ECharts `tooltip` block. Use `renderTooltip`.
    * Return tooltip content only. The chart controls tooltip placement.
    * Do not include web-only DOM behavior in the option.
    * Supported series are bar, line, area, pie, and donut. Registered series can be combined in one option.
  </Tab>

  <Tab title="Chart Props">
    ```tsx theme={null}
    <Chart
      option={option}
      variant="monochrome"
      width={480}
      height={300}
      accessibilityLabel="Bar chart. Sales by region."
    />
    ```

    ## `Chart` Props

    <ParamField path="height" type="number" required>
      Sets the chart height in pixels.
    </ParamField>

    <ParamField path="option" type="EChartsOption" required>
      Defines chart structure and data.
    </ParamField>

    <ParamField path="width" type="number" required>
      Sets the chart width in pixels.
    </ParamField>

    <ParamField path="accessibilityLabel" type="string">
      Describes the chart for VoiceOver and TalkBack.
    </ParamField>

    <ParamField path="appearance" type={`"light" | "dark"`} default="light">
      Sets the token appearance used by the chart theme.
    </ParamField>

    <ParamField path="renderTooltip" type="(info: ChartTooltipInfo) => ReactNode">
      Renders content for the active data point.
    </ParamField>

    <ParamField path="theme" type="string | object">
      Replaces the chart theme with a registered theme name or inline theme object.
    </ParamField>

    <ParamField path="variant" type={`"monochrome" | "categorical"`} default="monochrome">
      Applies an index-ordered palette and chart treatment.
    </ParamField>
  </Tab>

  <Tab title="Tooltip Config">
    ```tsx theme={null}
    import type { ChartTooltipInfo } from "@servicetitan/anvil2-rn-charts-kit";
    ```

    ## `ChartTooltipInfo`

    `renderTooltip` receives the active category and its data points.

    <ParamField path="name" type="string" required>
      Identifies the active category or donut slice.
    </ParamField>

    <ParamField path="points" type="ChartTooltipPoint[]" required>
      Contains the active data point for each applicable series.
    </ParamField>
  </Tab>

  <Tab title="Tooltip Point Config">
    ```tsx theme={null}
    import type { ChartTooltipPoint } from "@servicetitan/anvil2-rn-charts-kit";
    ```

    ## `ChartTooltipPoint`

    `ChartTooltipPoint` describes one series value in a tooltip.

    <ParamField path="color" type="string | undefined" required>
      Provides the resolved color when the chart can represent it as a swatch.
    </ParamField>

    <ParamField path="dataIndex" type="number" required>
      Identifies the value within the series data.
    </ParamField>

    <ParamField path="seriesIndex" type="number" required>
      Identifies the series within `option.series`.
    </ParamField>

    <ParamField path="seriesName" type="string | undefined" required>
      Provides the series `name` when defined.
    </ParamField>

    <ParamField path="value" type="unknown" required>
      Provides the datum value for product-specific formatting.
    </ParamField>
  </Tab>
</Tabs>