React Chart - 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.

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>

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

You can add custom styles (pattern or gradient) to the pane's background. To learn more, refer to the following API section: backgroundColor.

See Also