> ## 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-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](https://anvil.servicetitan.com/docs/data-visualization/line-charts.md)
* Shared API / selection / tooltips / palettes: [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md)

***

## Minimal option

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

charts-react-line

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-line?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Chart, type EChartsOption } from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

function App() {
  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] },
    ],
  };

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

export default App;
```

***

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

charts-react-line-dotted

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-line-dotted?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Chart, type EChartsOption } from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";

function App() {
  const option: EChartsOption = {
    grid: { left: 48, right: 16, top: 24, bottom: 84 },
    legend: { bottom: 0 },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    },
    yAxis: { type: "value" },
    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" },
      },
    ],
  };

  return (
    <Chart
      option={option}
      variant="categorical"
      width={480}
      height={300}
      accessibilityLabel="Line chart. Actual and target by month."
    />
  );
}

export default App;
```

***

## Tooltips

Pass `renderTooltip` to add hover content. See [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md#tooltips). A line with markers reports the single point under the pointer, and a line without markers reports the whole category.

charts-react-line-tooltip

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-line-tooltip?file=src/App.tsx)

```tsx lines expandable theme={null}
import {
  Chart,
  type ChartTooltipInfo,
  type EChartsOption,
} from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";
import { CartoTheme, Text, TooltipSurface } from "@servicetitan/anvil2-ai-kit";
// This file is most likely already in your workspace
import "@servicetitan/anvil2-ai-kit/styles.css";

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

function renderTooltip({ name, points }: ChartTooltipInfo) {
  return (
    <TooltipSurface
      content={
        <>
          <Text text={name} />
          {points.map((point) => (
            <Text
              key={point.seriesIndex}
              text={`${point.seriesName ? `${point.seriesName}: ` : ""}${String(point.value)}`}
            />
          ))}
        </>
      }
    />
  );
}

function App() {
  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] },
    ],
  };

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

export default App;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.