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.import React from 'react'; import Chart, { Pane } from 'devextreme-react/chart';
class App extends React.Component { render() { return (
export default App;
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.import React from 'react'; import Chart, { ValueAxis } from 'devextreme-react/chart';
class App extends React.Component { render() { return (
export default App;
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.import React from 'react'; import Chart, { Series } from 'devextreme-react/chart';
class App extends React.Component { render() { return (
export default App;
If all panes in a multi-pane chart should have uniform settings, you can specify them in the commonPaneSettings object.
- import React from 'react';
- import Chart, {
- CommonPaneSettings,
- Border
- } from 'devextreme-react/chart';
- class App extends React.Component {
- render() {
- return (
- <Chart ... >
- <CommonPaneSettings backgroundColor="yellow">
- <Border
- visible={true}
- width={2}
- />
- </CommonPaneSettings>
- </Chart>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.