All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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
        ],
        // ...
    })
    Vue

    React

    import React from 'react'; import Chart, { Pane } from 'devextreme-react/chart';

    class App extends React.Component { render() { return ( ); } }

    export default App;

  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 property.

    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
        ],
        // ...
    })
    Vue

    React

    import React from 'react'; import Chart, { ValueAxis } from 'devextreme-react/chart';

    class App extends React.Component { render() { return ( ); } }

    export default App;

  3. Bind series to panes
    Bind each series to a pane using the pane property like you did for value axes in the previous step. If the pane property 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
        ],
        // ...
    })
    Vue

    React

    import React from 'react'; import Chart, { Series } from 'devextreme-react/chart';

    class App extends React.Component { render() { return ( ); } }

    export default App;

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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxCommonPaneSettings background-color="yellow">
            <DxBorder 
                :visible="true" 
                :width="2"
            />
        </DxCommonPaneSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxCommonPaneSettings,
    DxBorder
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxCommonPaneSettings,
        DxBorder
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    CommonPaneSettings,
    Border
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <CommonPaneSettings backgroundColor="yellow">
                    <Border 
                        visible={true} 
                        width={2}
                    />
                </CommonPaneSettings>
            </Chart>
        );
    }
}

export default App;

View Demo

See Also