Overview

React Combination Chart combine two or more chart types within a single visualization to compare different datasets. Legends and tooltips provide additional information about each series.

Combination of Line, Area, and Column Chart

Multiple series of different chart types can be displayed within the same chart. Legends and tooltips improve readability by providing additional information for each series.

Pareto Chart

Pareto Chart is the combination of Line and Column Charts. The Column Chart represents data in the descending order, whereas the Line Chart represents the cumulative value of the data.

Combination of Candle with Column/Line

Combine Candle series with Line or Column series to display additional parameters for financial analysis. For example, stock volume can be visualized alongside price movement using a column series within the same chart.

React Combination Chart code example

Get started with React Combination Chart using a few simple lines of HTML and JavaScript code example as demonstrated below. Also explore demo to learn how to render and configure the component.

html
js

<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

import {AxisModel,Category, ChartComponent, ColumnSeries, Inject,LineSeries, SeriesCollectionDirective, SeriesDirective} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
class App extends React.Component<{}, {}> {
  public primaryXAxis: AxisModel = { valueType: 'Category'};
  public data1 : any[]= [
    { 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 }
];
public data2 : any[]= [
  { 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 }
];
  public render() {
    return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[ColumnSeries, Category,LineSeries]} />
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={this.data1} xName='x' yName='y' type='Line'/>
      <SeriesDirective dataSource={this.data2} xName='x' yName='y' type='Column'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);