All docs
V21.1
21.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.

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 property. For a single-pane chart, this property 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 property accepts an array. For further details, refer to the Multi-Pane Chart topic.

See Also