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.
To configure a multi-pane chart, follow the steps below.
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.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.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.
- <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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.