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

  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.

  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.

If all panes in a multi-pane chart should have uniform settings, you can specify them in the commonPaneSettings object.

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>

View Demo

See Also