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.

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.

    JavaScript
    • $(function() {
    • $("#chartContainer").dxChart({
    • // ...
    • panes: [
    • { name: 'topPane' },
    • { name: 'bottomPane' }
    • ]
    • });
    • });
  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.

    JavaScript
    • $(function() {
    • $("#chartContainer").dxChart({
    • // ...
    • valueAxis: [
    • { pane: 'topPane' },
    • { pane: 'bottomPane' }
    • ]
    • });
    • });
  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.

    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.

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

View Demo

See Also