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

# Combined

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

A combined chart mixes registered series types in a single `option`. There is no separate combo chart API. The registered modules are line, including area through `areaStyle`, bar, and pie or donut. Other ECharts series such as scatter and radar are not supported.

* Shared API / tooltips / palettes: [Chart component](/docs/kits/charts-react-native/chart)

***

## How it works

1. Define one ECharts `option` with several `series` entries of different types, or line series with and without `areaStyle`.
2. Pass the option to `Chart` with a `variant`, usually `"categorical"` when the chart includes a line.
3. Leave colors and markers to `variant`. A combined chart is multi-series, so the palette applies per series rather than per bar datum.
4. Set `accessibilityLabel`, `width`, and `height` on the React Native host.

***

## Line and area

Stacked area bands use `areaStyle` together with `stack`, and an unstacked line carries a target or forecast. Leave `stack` and `areaStyle` off the line so it overlays the bands.

```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: "Target",
      data: [900, 950, 1000, 1050, 1100, 1200],
      // The target is read against the band fills, not the surface, so a light stroke separates.
      itemStyle: { color: "#ffffff" },
      lineStyle: { type: "dotted", color: "#ffffff" },
    },
  ],
};

<Chart
  option={option}
  variant="categorical"
  width={480}
  height={320}
  accessibilityLabel="Combined chart. Stacked revenue and costs with a target line."
/>;
```

***

## Bar and line

Bars carry the primary measure and a line carries the comparison series. Both share one category axis.

```tsx theme={null}
const option: EChartsOption = {
  grid: { left: 48, right: 16, top: 24, bottom: 84 },
  legend: { bottom: 0 },
  xAxis: { type: "category", data: months },
  yAxis: { type: "value" },
  series: [
    { type: "bar", name: "Actual", data: […] },
    { type: "line", name: "Target", data: […] },
  ],
};

<Chart
  option={option}
  variant="categorical"
  width={480}
  height={320}
  accessibilityLabel="Combined chart. Actual bars with a target line."
/>;
```

A second value scale stays at the option level: pass `yAxis` as an array and set `yAxisIndex` on the series. This still renders through `Chart` rather than a separate API.