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.
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.HTMLTypeScript- <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
- ],
- // ...
- })
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.HTMLTypeScript- <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
- ],
- // ...
- })
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.HTMLTypeScript- <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.
- <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
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.