DevExtreme React - Multi-Pane Chart
A multi-pane chart distributes a collection of series between several panes, thus presenting data in a clear and uncluttered way.
To configure a multi-pane chart, follow the steps below.
Create and name the panes
Declare several objects in the panes array. Each object configures a single pane. Then, give each pane a unique name.jQuery
JavaScript$(function() { $("#chartContainer").dxChart({ // ... panes: [ { name: 'topPane' }, { name: 'bottomPane' } ] }); });
Angular
HTMLTypeScript<dx-chart ... > <dxi-panes name="topPane"></dxi-panes> <dxi-panes name="bottomPane"></dxi-panes> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Bind value axes to panes
If a Chart has multiple panes, it most likely has multiple value axes. Bind each of them to a pane using the pane option.jQuery
JavaScript$(function() { $("#chartContainer").dxChart({ // ... valueAxis: [ { pane: 'topPane' }, { pane: 'bottomPane' } ] }); });
Angular
HTMLTypeScript<dx-chart ... > ... <dxi-value-axis pane="topPane"></dxi-value-axis> <dxi-value-axis pane="bottomPane"></dxi-value-axis> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Bind series to panes
Bind each series to a pane using the pane option like you did for value axes in the previous step. If the pane option is missing from the series configuration, such a series will be bound to the defaultPane.jQuery
JavaScript$(function() { $("#chartContainer").dxChart({ // ... defaultPane: 'topPane', series: [{ pane: 'topPane' }, { pane: 'bottomPane' }, { pane: 'topPane' }, { // This series will be bound to the default pane }] }); });
Angular
HTMLTypeScript<dx-chart ... defaultPane="topPane"> ... <dxi-series pane="topPane"></dxi-series> <dxi-series pane="bottomPane"></dxi-series> <dxi-series pane="topPane"></dxi-series> <dxi-series> <!-- This series will be bound to the default pane --> </dxi-series> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
If all panes in a multi-pane chart should have uniform settings, you can specify them in the commonPaneSettings object.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... commonPaneSettings: { backgroundColor: 'yellow', border: { visible: true, width: 2 } } }); });
Angular
<dx-chart ... > <dxo-common-pane-settings backgroundColor="yellow"> <dxo-border [visible]="true" [width]="2"> </dxo-border> </dxo-common-pane-settings> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.