DevExtreme Vue - Overview

A pane is a chart area containing series. If there are many series in the Chart, they can be distributed between multiple panes.

DevExtreme HTML5 JavaScript Charts Panes

Panes are configured by the panes option. For a single-pane chart, this option accepts an object that configures the background color and the border of the pane.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        panes: {
            backgroundColor: 'yellow',
            border: {
                visible: true,
                width: 2
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-panes backgroundColor="yellow">
        <dxo-border
            [visible]="true"
            [width]="2">
        </dxo-border>
    </dxi-panes>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxPane background-color="yellow">
            <DxBorder 
                :visible="true" 
                :width="2" 
            />
        </DxPane>
    </DxChart>
</template>

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

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

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

export default App;

For a multi-pane chart, the panes option accepts an array. For further details, refer to the Multi-Pane Chart topic.

See Also