All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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