Line – Charts - React Native

A line chart shows trends over time. Use variant="categorical": the Anvil2 line variable order follows that palette, and the pale patterned monochrome steps are fill treatments that a stroke cannot carry. Limit a line chart to six series, which matches the marker shape sequence and the Anvil2 clarity guidance.

Design rules: Line charts
Shared API / tooltips / palettes: Chart component

Minimal option

Define structure and data in the option. Colors and markers come from variant.

const option: EChartsOption = {
  grid: { left: 48, right: 16, top: 24, bottom: 84 },
  legend: { bottom: 0 },
  xAxis: { type: "category", boundaryGap: false, data: months },
  yAxis: { type: "value" },
  series: [
    { type: "line", name: "Revenue", data: […] },
    { type: "line", name: "Costs", data: […] },
    { type: "line", name: "Profit", data: […] },
  ],
};

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

Variant styling

variant applies the following treatment:

Concern	Behavior
Color	Categorical palette by series index
Markers	Disabled below three series. At three or more, the Anvil2 shape order applies
Stroke width	Theme defaults

Pass variant="categorical" rather than authoring symbol or symbolSize lists. Avoid variant="monochrome" on a line chart, because the pale upper steps lose contrast against a light surface.

Dotted and dashed strokes

A solid stroke represents actual values, and a dotted or dashed stroke represents a target, forecast, or comparison. Keep variant="categorical" for color and set lineStyle.type to "dotted" or "dashed" on the series that needs it. A consumer-defined lineStyle merges with the variant’s stroke color.

series: [
  {
    type: "line",
    name: "Actual",
    data: [820, 932, 901, 934, 1290, 1330],
  },
  {
    type: "line",
    name: "Target",
    data: [520, 610, 590, 640, 780, 820],
    lineStyle: { type: "dotted" }, // or "dashed"
  },
];

Tooltips

Pass renderTooltip to add tooltip content. See Chart component. A line with markers reports the single point under the pointer, and a line without markers reports the whole category.

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 months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const option: EChartsOption = {
  grid: { left: 48, right: 16, top: 24, bottom: 84 },
  legend: { bottom: 0 },
  xAxis: { type: "category", boundaryGap: false, data: months },
  yAxis: { type: "value" },
  series: [
    { type: "line", name: "Revenue", data: [820, 932, 901, 934, 1290, 1330] },
    { type: "line", name: "Costs", data: [620, 732, 701, 734, 1090, 1130] },
    { type: "line", name: "Profit", data: [200, 200, 200, 200, 200, 200] },
  ],
};

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

​Minimal option

​Variant styling

​Dotted and dashed strokes

​Tooltips

Minimal option

Variant styling

Dotted and dashed strokes

Tooltips