DevExtreme Angular - Multi-Pane Chart

A multi-pane chart distributes a collection of series between several panes, thus presenting data in a clear and uncluttered way.

DevExtreme HTML5 JavaScript Charts Panes

To configure a multi-pane chart, follow the steps below.

  1. 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
    HTML
    TypeScript
    <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
        ],
        // ...
    })
  2. 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
    HTML
    TypeScript
    <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
        ],
        // ...
    })
  3. 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
    HTML
    TypeScript
    <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
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonPaneSettings: {
            backgroundColor: 'yellow',
            border: {
                visible: true,
                width: 2
            }
        }
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})

View Demo

See Also