HelpBot Assistant

How can I help you?

Multiple panes in React Chart component

3 Feb 202624 minutes to read

The chart area can be divided into multiple panes by defining rows and columns using the rows and columns collections. This feature is useful for displaying multiple related datasets within the same chart container while maintaining clear visual separation.

Rows

To split the chart area vertically into multiple rows, use the rows property of the chart.

  • Space for each row can be allocated by using the height property. The value can be specified either in pixels or as a percentage.
  • To associate a vertical axis with a specific row, assign the corresponding index using the rowIndex property of the axis.
  • To customize the bottom line of each row, use the border property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, RowsDirective, RowDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', title: 'Months', interval: 1 };
    const primaryyAxis = {
        title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
        lineStyle: { width: 0 }, labelFormat: '{value}°F'
    };
    const lines = { width: 0 };
    const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <AxesDirective>
        <AxisDirective rowIndex={1} name='yAxis1' opposedPosition={true} title='Temperature (Celsius)' labelFormat='{value}°C' minimum={24} maximum={36} interval={2} majorGridLines={lines} lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <RowsDirective>
        <RowDirective height='50%'></RowDirective>
        <RowDirective height='50%'></RowDirective>
      </RowsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Japan' type='Line' marker={marker} yAxisName='yAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, RowsDirective, RowDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months', interval: 1 };
  const primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  const lines = { width: 0 };
  const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <AxesDirective>
        <AxisDirective rowIndex={1} name='yAxis1' opposedPosition={true} title='Temperature (Celsius)'
          labelFormat='{value}°C' minimum={24} maximum={36} interval={2}
          majorGridLines={lines} lineStyle={lines} >
        </AxisDirective>
      </AxesDirective>
      <RowsDirective>
        <RowDirective height='50%' ></RowDirective>
        <RowDirective height='50%' ></RowDirective>
      </RowsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Japan' type='Line'
          marker={marker} yAxisName='yAxis1' >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'Jan', y: 15, y1: 33 }, 
    { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, 
    { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, 
    { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, 
    { x: 'Dec', y: 35, y1: 31 }
];
export let data: Object[] = [
    { x: 'Jan', y: 15, y1: 33 }, 
    { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, 
    { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, 
    { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, 
    { x: 'Dec', y: 35, y1: 31 }
];

To span a vertical axis across multiple rows, use the span property of the axis.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', title: 'Months', interval: 1 };
    const primaryyAxis = {
        title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
        lineStyle: { width: 0 }, labelFormat: '{value}°F'
    };
    const lines = { width: 0 };
    const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <AxesDirective>
        <AxisDirective rowIndex={1} name='yAxis1' opposedPosition={true} title='Temperature (Celsius)' labelFormat='{value}°C' minimum={24} maximum={36} interval={2} majorGridLines={lines} lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Japan' type='Line' marker={marker} yAxisName='yAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months', interval: 1 };
  const primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  const lines = { width: 0 };
  const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <AxesDirective>
        <AxisDirective rowIndex={1} name='yAxis1' opposedPosition={true} title='Temperature (Celsius)'
          labelFormat='{value}°C' minimum={24} maximum={36} interval={2}
          majorGridLines={lines} lineStyle={lines} >
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Japan' type='Line'
          marker={marker} yAxisName='yAxis1' >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'Jan', y: 15, y1: 33 }, 
    { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, 
    { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, 
    { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, 
    { x: 'Dec', y: 35, y1: 31 }
];
export let data: Object[] = [
    { x: 'Jan', y: 15, y1: 33 }, 
    { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, 
    { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, 
    { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, 
    { x: 'Dec', y: 35, y1: 31 }
];

Columns

To split the chart area horizontally into multiple columns, use the columns property of the chart.
property.*

  • Space for each column can be allocated using the width property. The width can be specified either in pixels or as a percentage.
  • To associate a horizontal axis with a specific column, assign the corresponding index using the columnIndex property of the axis.
  • To customize the bottom line of each column, use the border property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, ColumnsDirective, ColumnDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', title: 'Months', interval: 1 };
    const primaryyAxis = {
        title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
        lineStyle: { width: 0 }, labelFormat: '{value}°F'
    };
    const lines = { width: 0 };
    const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <AxesDirective>
        <AxisDirective columnIndex={1} name='xAxis1' opposedPosition={true} valueType='Category' majorGridLines={lines} lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <ColumnsDirective>
        <ColumnDirective width='50%'></ColumnDirective>
        <ColumnDirective width='50%'></ColumnDirective>
      </ColumnsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Japan' type='Line' marker={marker} xAxisName='xAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, ColumnsDirective, ColumnDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months', interval: 1 };
  const primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  const lines = { width: 0 };
  const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <AxesDirective>
        <AxisDirective columnIndex={1} name='xAxis1' opposedPosition={true} valueType='Category'
          majorGridLines={lines} lineStyle={lines} >
        </AxisDirective>
      </AxesDirective>
      <ColumnsDirective>
        <ColumnDirective width='50%' ></ColumnDirective>
        <ColumnDirective width='50%' ></ColumnDirective>
      </ColumnsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Japan' type='Line'
          marker={marker} xAxisName='xAxis1' >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'Jan', y: 15, y1: 33 }, 
    { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, 
    { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, 
    { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, 
    { x: 'Dec', y: 35, y1: 31 }
];
export let data: Object[] = [
    { x: 'Jan', y: 15, y1: 33 }, 
    { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, 
    { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, 
    { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, 
    { x: 'Dec', y: 35, y1: 31 }
];

To span a horizontal axis across multiple columns, use the span property of the axis.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, ColumnsDirective, ColumnDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', span: 2, title: 'Months', interval: 1 };
    const primaryyAxis = {
        title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
        lineStyle: { width: 0 }, labelFormat: '{value}°F'
    };
    const lines = { width: 0 };
    const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <AxesDirective>
        <AxisDirective columnIndex={1} name='xAxis1' opposedPosition={true} valueType='Category' majorGridLines={lines} lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <ColumnsDirective>
        <ColumnDirective width='50%'></ColumnDirective>
        <ColumnDirective width='50%'></ColumnDirective>
      </ColumnsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Japan' type='Line' marker={marker} xAxisName='xAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, ColumnsDirective, ColumnDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', span: 2, title: 'Months', interval: 1 };
  const primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  const lines = { width: 0 };
  const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <AxesDirective>
        <AxisDirective columnIndex={1} name='xAxis1' opposedPosition={true} valueType='Category'
          majorGridLines={lines} lineStyle={lines} >
        </AxisDirective>
      </AxesDirective>
      <ColumnsDirective>
        <ColumnDirective width='50%' ></ColumnDirective>
        <ColumnDirective width='50%' ></ColumnDirective>
      </ColumnsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Japan' type='Line'
          marker={marker} xAxisName='xAxis1' >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'Jan', y: 15, y1: 33 }, 
    { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, 
    { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, 
    { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, 
    { x: 'Dec', y: 35, y1: 31 }
];
export let data: Object[] = [
    { x: 'Jan', y: 15, y1: 33 }, 
    { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 },
    { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, 
    { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, 
    { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 },
    { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, 
    { x: 'Dec', y: 35, y1: 31 }
];