Vue Chart - 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
    App.vue
    <template> 
    <DxChart ... >
        <DxPane name="topPane"/>
        <DxPane name="bottomPane"/>
    </DxChart>
</template>

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

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

export default function App() {
    return (
        <Chart ... >
            <Pane name="topPane"/>
            <Pane name="bottomPane"/>
        </Chart>
    );
}

  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-chart-value-axis pane="topPane"></dxi-chart-value-axis>
    <dxi-chart-value-axis pane="bottomPane"></dxi-chart-value-axis>
</dx-chart>
    import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
    Vue
    App.vue
    <template> 
    <DxChart ... >
        <DxValueAxis pane="topPane"/>
        <DxValueAxis pane="bottomPane"/>
    </DxChart>
</template>

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

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

export default function App() {
    return (
        <Chart ... >
            <ValueAxis pane="topPane"/>
            <ValueAxis pane="bottomPane"/>
        </Chart>
    );
}

  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-chart-series pane="topPane"></dxi-chart-series>
    <dxi-chart-series pane="bottomPane"></dxi-chart-series>
    <dxi-chart-series pane="topPane"></dxi-chart-series>
    <dxi-chart-series>
        <!-- This series will be bound to the default pane -->
    </dxi-chart-series>
</dx-chart>
    import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
    Vue
    App.vue
    <template> 
    <DxChart ... >
        <DxSeries pane="topPane"/>
        <DxSeries pane="bottomPane"/>
        <DxSeries pane="topPane"/>
        <DxSeries>
            <!-- This series will be bound to the default pane -->
        </DxSeries>
    </DxChart>
</template>

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

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

export default function App() {
    return (
        <Chart ... >
            <Series pane="topPane"/>
            <Series pane="bottomPane"/>
            <Series pane="topPane"/>
            <Series>
                {/* This series will be bound to the default pane */}
            </Series>
        </Chart>
    );
}

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-chart-common-pane-settings
        backgroundColor="yellow">
        <dxo-chart-border
            [visible]="true"
            [width]="2">
        </dxo-chart-border>
    </dxo-chart-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';

export default function App() {
    return (
        <Chart ... >
            <CommonPaneSettings backgroundColor="yellow">
                <Border 
                    visible={true} 
                    width={2}
                />
            </CommonPaneSettings>
        </Chart>
    );
}

View Demo

See Also