JavaScript/jQuery 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.JavaScript- $(function() {
- $("#chartContainer").dxChart({
- // ...
- panes: [
- { name: 'topPane' },
- { name: 'bottomPane' }
- ]
- });
- });
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.JavaScript- $(function() {
- $("#chartContainer").dxChart({
- // ...
- valueAxis: [
- { pane: 'topPane' },
- { pane: 'bottomPane' }
- ]
- });
- });
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.JavaScript- $(function() {
- $("#chartContainer").dxChart({
- // ...
- defaultPane: 'topPane',
- series: [{
- pane: 'topPane'
- }, {
- pane: 'bottomPane'
- }, {
- pane: 'topPane'
- }, {
- // This series will be bound to the default pane
- }]
- });
- });
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
- }
- }
- });
- });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.