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.

See Also