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

***

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

***

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

charts-react-combined-line-area

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-combined-line-area?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: "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: "Target",
        data: [900, 950, 1000, 1050, 1100, 1200],
        itemStyle: { color: "#ffffff" },
        lineStyle: { type: "dotted", color: "#ffffff" },
      },
    ],
  };

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

export default App;
```

***

## Bar and line

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

charts-react-combined-bar-line

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-combined-bar-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";

function App() {
  const option: EChartsOption = {
    grid: { left: 48, right: 16, top: 24, bottom: 84 },
    legend: { bottom: 0 },
    xAxis: {
      type: "category",
      data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    },
    yAxis: { type: "value" },
    series: [
      { type: "bar", name: "Actual", data: [820, 932, 901, 934, 1290, 1330] },
      {
        type: "line",
        name: "Target",
        data: [900, 950, 1000, 1050, 1100, 1200],
      },
    ],
  };

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

export default App;
```

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.


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