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

# Area

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

An area chart shows trends with magnitude, drawing filled bands under the line. Anvil2 documents stacked area only, not overlapped. Use `monochrome` for four or fewer variables, and `categorical` for five or more. Area charts do not use the semantic palette.

* Design rules: [Area charts](/docs/web/data-visualization/area-charts)
* Shared API / tooltips / palettes: [Chart component](/docs/kits/charts-react-native/chart)

***

## Minimal option

An ECharts area is a line series with `areaStyle` set. An empty object is enough, because `variant` fills the band. Set `stack` in the option: stacking carries meaning rather than styling, and Anvil2 area charts are stacked.

```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", stack: "total", data: […], areaStyle: {} },
    { type: "line", name: "Costs", stack: "total", data: […], areaStyle: {} },
    { type: "line", name: "Profit", stack: "total", data: […], areaStyle: {} },
  ],
};

<Chart
  option={option}
  variant="monochrome"
  width={480}
  height={300}
  accessibilityLabel="Area chart. Stacked revenue components by month."
/>;
```

***

## Variant styling

`variant` applies the following treatment:

| Concern         | Behavior                                                                  |
| --------------- | ------------------------------------------------------------------------- |
| Band fill       | Palette by series index, solid, with striped or outlined monochrome steps |
| Band separators | Surface-colored stroke between stacked bands                              |
| Markers         | Disabled, since the bands already separate the series                     |

Avoid adding fades, opacities, or separator strokes to reproduce this treatment, and avoid overlapped areas that rely on transparency instead of stacking.

***

## Tooltips

Pass `renderTooltip` to add tooltip content. See [Chart component](/docs/kits/charts-react-native/chart#tooltips). Area charts have no markers to hit, so the chart reports the whole category and `points` holds one entry per series.

```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",
      stack: "total",
      data: [320, 332, 301, 334, 390, 330],
      areaStyle: {},
    },
    {
      type: "line",
      name: "Costs",
      stack: "total",
      data: [220, 182, 191, 234, 290, 330],
      areaStyle: {},
    },
    {
      type: "line",
      name: "Profit",
      stack: "total",
      data: [150, 232, 201, 154, 190, 330],
      areaStyle: {},
    },
  ],
};

<Chart
  option={option}
  variant="monochrome"
  renderTooltip={renderTooltip}
  width={480}
  height={300}
  accessibilityLabel="Area chart. Stacked revenue components by month."
/>;
```