Combined – Charts - React Native

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

How it works

Define one ECharts option with several series entries of different types, or line series with and without areaStyle.
Pass the option to Chart with a variant, usually "categorical" when the chart includes a line.
Leave colors and markers to variant. A combined chart is multi-series, so the palette applies per series rather than per bar datum.
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.

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.

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.

Last modified on August 20, 2026

⌘I