Multiple Panes in JavaScript Chart control

27 Mar 2023 / 6 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.

You can allocate space for each row by using the height property. The value can be either percentage or in pixel.
To associate a vertical axis to a particular row, specify its index to rowIndex property of the axis.
To customize each row’s bottom line, use border property.

Source

Preview

index.ts

index.html

import { Chart, Category, ColumnSeries, LineSeries } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, LineSeries);
let chartData: 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
    title: 'Months',
    valueType: 'Category',
    interval: 1
},
primaryYAxis: {
    minimum: 0, maximum: 90, interval: 20,
    lineStyle: { width: 0 },
    title: 'Temperature (Fahrenheit)',
    labelFormat: '{value}°F'
},
// Rows for chart axis
rows:[
    {
        height: '50%'
    },{
        height: '50%'
    }
],
axes:[
    {
        majorGridLines: { width: 0 },
        rowIndex: 1, opposedPosition: true,
        lineStyle: { width: 0 },
        minimum: 24, maximum: 36, interval: 4,
        name: 'yAxis', title: 'Temperature (Celsius)',
        labelFormat: '{value}°C'
    }
],
series:[{
    dataSource: chartData,
    xName: 'x', yName: 'y',
    name: 'Germany', type: 'Column'
},{
    dataSource: chartData, width:2,
    xName: 'x', yName: 'y1', yAxisName: 'yAxis',
    name: 'Japan', type: 'Line',
    marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }
}],
title: 'Weather Condition'
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

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

Source

Preview

index.ts

index.html

import { Chart, Category, ColumnSeries, LineSeries } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, LineSeries);
let chartData: 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
    title: 'Months',
    valueType: 'Category',
    interval: 1
},
primaryYAxis: {
    minimum: 0, maximum: 90, interval: 10,
    lineStyle: { width: 0 },
    title: 'Temperature (Fahrenheit)',
    labelFormat: '{value}°F',
    //Span for chart axis
    span: 2
},
rows:[
    {
        height: '50%'
    },{
        height: '50%'
    }
],
axes:[
    {
        majorGridLines: { width: 0 },
        rowIndex: 1, opposedPosition: true,
        lineStyle: { width: 0 },
        minimum: 24, maximum: 36, interval: 2,
        name: 'yAxis', title: 'Temperature (Celsius)',
        labelFormat: '{value}°C'
    }
],
series:[{
    dataSource: chartData,
    xName: 'x', yName: 'y',
    name: 'Germany', type: 'Column'
},{
    dataSource: chartData, width:2,
    xName: 'x', yName: 'y1', yAxisName: 'yAxis',
    name: 'Japan', type: 'Line',
    marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }
}],
title: 'Weather Condition'
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Columns

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

You can allocate space for each column by using the width property. The given width can be either percentage or in pixel.
To associate a horizontal axis to a particular column, specify its index to columnIndex property of the axis.
To customize each column’s bottom line, use [border property.

Source

Preview

index.ts

index.html

import { Chart, Category, ColumnSeries, LineSeries } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, LineSeries);
let chartData: 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
    valueType: 'Category',
    interval: 1
},
primaryYAxis: {
    minimum: 0, maximum: 90, interval: 10,
    lineStyle: { width: 0 },
    title: 'Temperature (Fahrenheit)',
    labelFormat: '{value}°F'
},
// Columns for chart axis
columns:[
    {
        width: '50%'
    },{
        width: '50%'
    }
],
axes:[
    {
        majorGridLines: { width: 0 },
        columnIndex: 1,
        valueType: 'Category',
        lineStyle: { width: 0 },
        name: 'xAxis'
    }
],
series:[{
    dataSource: chartData,
    xName: 'x', yName: 'y',
    name: 'Germany', type: 'Column'
},{
    dataSource: chartData, width:2,
    xName: 'x', yName: 'y1', xAxisName: 'xAxis',
    name: 'Japan', type: 'Line',
    marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }
}],
title: 'Weather Condition'
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

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

Source

Preview

index.ts

index.html

import { Chart, Category, ColumnSeries, LineSeries } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, LineSeries);
let chartData: 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
    valueType: 'Category',
    interval: 1,
    // Span for chart axis
    span: 2
},
primaryYAxis: {
    minimum: 0, maximum: 90, interval: 10,
    lineStyle: { width: 0 },
    title: 'Temperature (Fahrenheit)',
    labelFormat: '{value}°F'
},
columns:[
    {
        width: '50%'
    },{
        width: '50%'
    }
],
axes:[
    {
        valueType: 'Category',
        majorGridLines: { width: 0 },
        columnIndex: 1, opposedPosition: true,
        lineStyle: { width: 0 },
        name: 'xAxis'
    }
],
series:[{
    dataSource: chartData,
    xName: 'x', yName: 'y',
    name: 'Germany', type: 'Column'
},{
    dataSource: chartData, width:2,
    xName: 'x', yName: 'y1', xAxisName: 'xAxis',
    name: 'Japan', type: 'Line',
    marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }
}],
title: 'Weather Condition'
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Contents

Rows
Columns

Contents

Rows
Columns