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.

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.

    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
    • ],
    • // ...
    • })
  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.

    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
    • ],
    • // ...
    • })
  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.

    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
    • ],
    • // ...
    • })

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

HTML
TypeScript
  • <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
  • ],
  • // ...
  • })

View Demo

See Also