Area – Charts - React Native

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
Shared API / tooltips / palettes: Chart component

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.

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. Area charts have no markers to hit, so the chart reports the whole category and points holds one entry per series.

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."
/>;

Last modified on August 20, 2026

⌘I