React Charts Combination Chart

Overview

The React combination chart allows users to merge two or more chart types into a single visualization, making it easier to compare different datasets. It supports interactive features such as zooming, panning, tooltips, and trackballs for enhanced data exploration.

Mixed chart types

Users can combine line, area, and column chart series within one chart to represent diverse data formats. Legends and tooltips improve readability and help users distinguish among the different series.

React combination chart code example

Quickly get started with the React combination chart using a few lines of TSX code, as shown below. You can also explore this React combination chart example to learn how to render and customize the chart in a React application.

import { Chart, ChartPrimaryXAxis, ChartSeriesCollection, ChartSeries } from '@syncfusion/react-charts';

export default function App() {
    const data1 = [
      { x: 2005, y: 28 }, 
      { x: 2006, y: 25 }, 
      { x: 2007, y: 26 }, 
      { x: 2008, y: 27 },
      { x: 2009, y: 32 }, 
      { x: 2010, y: 35 }, 
      { x: 2011, y: 30 }
    ];

    const data2 = [
      { x: 2005, y: 15 }, 
      { x: 2006, y: 16 }, 
      { x: 2007, y: 17 }, 
      { x: 2008, y: 18 },
      { x: 2009, y: 19 }, 
      { x: 2010, y: 20 }, 
      { x: 2011, y: 21 }
    ];
    return (
        <Chart>
            <ChartPrimaryXAxis valueType='Category'>
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={data1} xField="x" yField="y" type="Line" />
              <ChartSeries dataSource={data2} xField="x" yField="y" type="Column" />
            </ChartSeriesCollection>
        </Chart>
    )
}