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

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.

   jQuery

   JavaScript

   $(function() {
       $("#chartContainer").dxChart({
           // ...
           panes: [
               { name: 'topPane' },
               { name: 'bottomPane' }
           ]
       });
   });

   Angular

   HTML

   TypeScript

   <dx-chart ... >
       <dxi-panes name="topPane"></dxi-panes>
       <dxi-panes name="bottomPane"></dxi-panes>
   </dx-chart>

   import { DxChartModule } from "devextreme-angular";
   // ...
   export class AppComponent {
       // ...
   }
   @NgModule({
       imports: [
           // ...
           DxChartModule
       ],
       // ...
   })

   Vue

   React

   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.

   jQuery

   JavaScript

   $(function() {
       $("#chartContainer").dxChart({
           // ...
           valueAxis: [
               { pane: 'topPane' },
               { pane: 'bottomPane' }
           ]
       });
   });

   Angular

   HTML

   TypeScript

   <dx-chart ... >
       ...
       <dxi-value-axis pane="topPane"></dxi-value-axis>
       <dxi-value-axis pane="bottomPane"></dxi-value-axis>
   </dx-chart>

   import { DxChartModule } from "devextreme-angular";
   // ...
   export class AppComponent {
       // ...
   }
   @NgModule({
       imports: [
           // ...
           DxChartModule
       ],
       // ...
   })

   Vue

   React

   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.

   jQuery

   JavaScript

   $(function() {
       $("#chartContainer").dxChart({
           // ...
           defaultPane: 'topPane',
           series: [{
               pane: 'topPane'
           }, {
               pane: 'bottomPane'
           }, {
               pane: 'topPane'
           }, {
               // This series will be bound to the default pane
           }]
       });
   });

   Angular

   HTML

   TypeScript

   <dx-chart ...
       defaultPane="topPane">
       ...
       <dxi-series pane="topPane"></dxi-series>
       <dxi-series pane="bottomPane"></dxi-series>
       <dxi-series pane="topPane"></dxi-series>
       <dxi-series>
           <!-- This series will be bound to the default pane -->
       </dxi-series>
   </dx-chart>

   import { DxChartModule } from "devextreme-angular";
   // ...
   export class AppComponent {
       // ...
   }
   @NgModule({
       imports: [
           // ...
           DxChartModule
       ],
       // ...
   })

   Vue

   React

   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.

$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonPaneSettings: {
            backgroundColor: 'yellow',
            border: {
                visible: true,
                width: 2
            }
        }
    });
});

<dx-chart ... >
    <dxo-common-pane-settings
        backgroundColor="yellow">
        <dxo-border
            [visible]="true"
            [width]="2">
        </dxo-border>
    </dxo-common-pane-settings>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

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

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

• Chart API Reference