React
Demos
Support
Forum
Download
Search results

Multiple Panes in React Chart component

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.

Source
Preview
index.tsx
index.jsx
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';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { 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 }
  ];
  public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months', interval: 1 };
  public primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  public lines = { width: 0 };
  public marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.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={this.lines} lineStyle={this.lines} >
        </AxisDirective>
      </AxesDirective>
      <RowsDirective>
        <RowDirective height='50%' ></RowDirective>
        <RowDirective height='50%' ></RowDirective>
      </RowsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y1' name='Japan' type='Line'
          marker={this.marker} yAxisName='yAxis1' >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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 }
        ];
        this.primaryxAxis = { valueType: 'Category', title: 'Months', interval: 1 };
        this.primaryyAxis = {
            title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
            lineStyle: { width: 0 }, labelFormat: '{value}°F'
        };
        this.lines = { width: 0 };
        this.marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    }
    render() {
        return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.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={this.lines} lineStyle={this.lines}>
        </AxisDirective>
      </AxesDirective>
      <RowsDirective>
        <RowDirective height='50%'></RowDirective>
        <RowDirective height='50%'></RowDirective>
      </RowsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y1' name='Japan' type='Line' marker={this.marker} yAxisName='yAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));

For spanning the vertical axis along multiple row, you can use span property of an axis.

Source
Preview
index.tsx
index.jsx
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';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { 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 }
  ];
  public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months', interval: 1 };
  public primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  public lines = { width: 0 };
  public marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.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={this.lines} lineStyle={this.lines} >
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y1' name='Japan' type='Line'
          marker={this.marker} yAxisName='yAxis1' >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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 }
        ];
        this.primaryxAxis = { valueType: 'Category', title: 'Months', interval: 1 };
        this.primaryyAxis = {
            title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
            lineStyle: { width: 0 }, labelFormat: '{value}°F'
        };
        this.lines = { width: 0 };
        this.marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    }
    render() {
        return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.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={this.lines} lineStyle={this.lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y1' name='Japan' type='Line' marker={this.marker} yAxisName='yAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));

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.

Source
Preview
index.tsx
index.jsx
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';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { 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 }
  ];
  public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months', interval: 1 };
  public primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  public lines = { width: 0 };
  public marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

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

};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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 }
        ];
        this.primaryxAxis = { valueType: 'Category', title: 'Months', interval: 1 };
        this.primaryyAxis = {
            title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
            lineStyle: { width: 0 }, labelFormat: '{value}°F'
        };
        this.lines = { width: 0 };
        this.marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    }
    render() {
        return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <AxesDirective>
        <AxisDirective columnIndex={1} name='xAxis1' opposedPosition={true} valueType='Category' majorGridLines={this.lines} lineStyle={this.lines}>
        </AxisDirective>
      </AxesDirective>
      <ColumnsDirective>
        <ColumnDirective width='50%'></ColumnDirective>
        <ColumnDirective width='50%'></ColumnDirective>
      </ColumnsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y1' name='Japan' type='Line' marker={this.marker} xAxisName='xAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));

For spanning the horizontal axis along multiple column, you can use span property of an axis.

Source
Preview
index.tsx
index.jsx
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';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { 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 }
  ];
  public primaryxAxis: AxisModel = { valueType: 'Category', span: 2, title: 'Months', interval: 1 };
  public primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  public lines = { width: 0 };
  public marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };

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

};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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 }
        ];
        this.primaryxAxis = { valueType: 'Category', span: 2, title: 'Months', interval: 1 };
        this.primaryyAxis = {
            title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 20,
            lineStyle: { width: 0 }, labelFormat: '{value}°F'
        };
        this.lines = { width: 0 };
        this.marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    }
    render() {
        return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='Weather Condition'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <AxesDirective>
        <AxisDirective columnIndex={1} name='xAxis1' opposedPosition={true} valueType='Category' majorGridLines={this.lines} lineStyle={this.lines}>
        </AxisDirective>
      </AxesDirective>
      <ColumnsDirective>
        <ColumnDirective width='50%'></ColumnDirective>
        <ColumnDirective width='50%'></ColumnDirective>
      </ColumnsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y1' name='Japan' type='Line' marker={this.marker} xAxisName='xAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Previous
Next
Contents
Contents