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.

    import React from 'react'; import Chart, { Pane } from 'devextreme-react/chart';

    class App extends React.Component { render() { return ( ); } }

    export default App;

  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.

    import React from 'react'; import Chart, { ValueAxis } from 'devextreme-react/chart';

    class App extends React.Component { render() { return ( ); } }

    export default App;

  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.

    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.

App.js
  • 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;

View Demo

See Also