Multiple panes in React Chart component
19 Sep 202424 minutes to read
Chart area can be divided into multiple panes using rows
and columns
.
Rows
To split the chart area vertically into number of rows, use rows
property of the chart.
1. You can allocate space for each row by using the height
property.
The value can be either in percentage or in pixel.
2. To associate a vertical axis to a particular row, specify its index to
rowIndex
property of the axis.
3. To customize each row’s bottom line, use 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 }
];
For spanning the vertical axis along multiple row, you can use span
property of an 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 number of columns, use columns
property of the chart.
1. You can allocate space for each column by using the width
property. The given width can be either in percentage or in pixel.
2. To associate a horizontal axis to a particular column, specify its index to
columnIndex
property of the axis.
3. To customize each column’s bottom line, use 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 }
];
For spanning the horizontal axis along multiple column, you can use span
property of an 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 }
];