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

# Line

> Line chart implementation for @servicetitan/anvil2-rn-charts-kit.

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](/docs/web/data-visualization/line-charts)
* Shared API / tooltips / palettes: [Chart component](/docs/kits/charts-react-native/chart)

***

## Minimal option

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

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

```tsx theme={null}
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](/docs/kits/charts-react-native/chart#tooltips). A line with markers reports the single point under the pointer, and a line without markers reports the whole category.

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