Configuration panes

Defines the dxChart widget's pane(s).

Type: Object|Array

A Pane is a visual area within a chart that includes all the elements required to display data. If you need to plot several series, you can distribute them between several panes. In this instance, the series are easily compared to each other and provide the entire picture of the presented data. To define panes, introduce the panes array of objects. Each object represents a single pane. To identify panes, set their name property.

If you need to set similar values to properties of several panes, use the commonPaneSettings configuration object. It exposes the properties that can be specified for all panes at once. Note that the values specified for a pane individually (in the panes array) override the values that are specified for all panes (in the commonPaneSettings object).

If you plot all series on one pane, use the panes configuration object to make the pane's border visible, set up border options or set the pane's background color, if required.

Show Example:
jQuery

In this example, two panes are used to represent data. Each pane is defined within the panes array.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { month: 'January', avgT: 9.8, minT: 4.1, maxT: 15.5, prec: 109 },
    { month: 'February', avgT: 11.8, minT: 5.8, maxT: 17.8, prec: 104 },
    { month: 'March', avgT: 13.4, minT: 7.2, maxT: 19.6, prec: 92 },
    { month: 'April', avgT: 15.4, minT: 8.1, maxT: 22.8, prec: 30 },
    { month: 'May', avgT: 18, minT: 10.3, maxT: 25.7, prec: 10 },
    { month: 'June', avgT: 20.6, minT: 12.2, maxT: 29, prec: 2 },
    { month: 'July', avgT: 22.2, minT: 13.2, maxT: 31.3, prec: 2 },
    { month: 'August', avgT: 22.2, minT: 13.2, maxT: 31.1, prec: 1 },
    { month: 'September', avgT: 21.2, minT: 12.4, maxT: 29.9, prec: 8 },
    { month: 'October', avgT: 17.9, minT: 9.7, maxT: 26.1, prec: 24 },
    { month: 'November', avgT: 12.9, minT: 6.2, maxT: 19.6, prec: 64 },
    { month: 'December', avgT: 9.6, minT: 3.4, maxT: 15.7, prec: 76 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'month'
        },
        panes: [
            { name: 'topPane' },
            { name: 'bottomPane' }
        ],
        series: [{
            pane: 'topPane',
            type: 'rangeArea',
            rangeValue1Field: 'minT',
            rangeValue2Field: 'maxT',
            name: 'Monthly Temperature Ranges, °C'
        }, {
            pane: 'topPane',
            valueField: 'avgT',
            name: 'Average Temperature, °C'
        }, {
            type: 'bar',
            valueField: 'prec',
            name: 'prec, mm'
        }
        ],
        valueAxis: [
          { pane: 'bottomPane', grid: { visible: true } },
          { pane: 'topPane', grid: { visible: true } }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

backgroundColor

Specifies a background color in a pane.

Type: String
Default Value: 'none'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
Show Example:
jQuery

In this example, the color of the panes' background is changed using the common backgroundColor option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { month: 'January', avgT: 9.8, minT: 4.1, maxT: 15.5, prec: 109 },
    { month: 'February', avgT: 11.8, minT: 5.8, maxT: 17.8, prec: 104 },
    { month: 'March', avgT: 13.4, minT: 7.2, maxT: 19.6, prec: 92 },
    { month: 'April', avgT: 15.4, minT: 8.1, maxT: 22.8, prec: 30 },
    { month: 'May', avgT: 18, minT: 10.3, maxT: 25.7, prec: 10 },
    { month: 'June', avgT: 20.6, minT: 12.2, maxT: 29, prec: 2 },
    { month: 'July', avgT: 22.2, minT: 13.2, maxT: 31.3, prec: 2 },
    { month: 'August', avgT: 22.2, minT: 13.2, maxT: 31.1, prec: 1 },
    { month: 'September', avgT: 21.2, minT: 12.4, maxT: 29.9, prec: 8 },
    { month: 'October', avgT: 17.9, minT: 9.7, maxT: 26.1, prec: 24 },
    { month: 'November', avgT: 12.9, minT: 6.2, maxT: 19.6, prec: 64 },
    { month: 'December', avgT: 9.6, minT: 3.4, maxT: 15.7, prec: 76 },
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'month'
        },
        panes: [{
            name: 'topPane',
            backgroundColor: 'rgb(231, 236, 222)'
        }, {
            name: 'bottomPane',
            backgroundColor: 'rgb(255, 255, 224)',
            border: { visible: false }
        }],
        series: [{
            pane: 'topPane',
            type: 'rangeArea',
            rangeValue1Field: 'minT',
            rangeValue2Field: 'maxT',
            name: 'Monthly Temperature Ranges, °C'
        }, {
            pane: 'topPane',
            valueField: 'avgT',
            name: 'Average Temperature, °C'
        }, {
            type: 'bar',
            valueField: 'prec',
            name: 'prec, mm'
        }
        ],
        valueAxis: [
          { pane: 'bottomPane', grid: { visible: true } },
          { pane: 'topPane', grid: { visible: true } }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

border

Specifies the border options of a chart's pane.

Type: Object

Show Example:
jQuery

In this example, the panes of a multi-pane chart are separated one from another by a border colored in blue.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { month: 'January', avgT: 9.8, minT: 4.1, maxT: 15.5, prec: 109 },
    { month: 'February', avgT: 11.8, minT: 5.8, maxT: 17.8, prec: 104 },
    { month: 'March', avgT: 13.4, minT: 7.2, maxT: 19.6, prec: 92 },
    { month: 'April', avgT: 15.4, minT: 8.1, maxT: 22.8, prec: 30 },
    { month: 'May', avgT: 18, minT: 10.3, maxT: 25.7, prec: 10 },
    { month: 'June', avgT: 20.6, minT: 12.2, maxT: 29, prec: 2 },
    { month: 'July', avgT: 22.2, minT: 13.2, maxT: 31.3, prec: 2 },
    { month: 'August', avgT: 22.2, minT: 13.2, maxT: 31.1, prec: 1 },
    { month: 'September', avgT: 21.2, minT: 12.4, maxT: 29.9, prec: 8 },
    { month: 'October', avgT: 17.9, minT: 9.7, maxT: 26.1, prec: 24 },
    { month: 'November', avgT: 12.9, minT: 6.2, maxT: 19.6, prec: 64 },
    { month: 'December', avgT: 9.6, minT: 3.4, maxT: 15.7, prec: 76 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'month'
        },
        panes: [{
            name: 'topPane',
            border: {
                visible: true,
                left: false,
                right: false,
                top: false,
                color: 'blue'
            }
        }, {
            name: 'bottomPane'
        }],
        series: [{
            pane: 'topPane',
            type: 'rangeArea',
            rangeValue1Field: 'minT',
            rangeValue2Field: 'maxT',
            name: 'Monthly Temperature Ranges, °C'
        }, {
            pane: 'topPane',
            valueField: 'avgT',
            name: 'Average Temperature, °C'
        }, {
            type: 'bar',
            valueField: 'prec',
            name: 'prec, mm'
        }
        ],
        valueAxis: [
          { pane: 'bottomPane', grid: { visible: true } },
          { pane: 'topPane', grid: { visible: true } }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

name

Specifies the name of a pane.

Type: String
Default Value: 'default'

Use pane names when specifying panes for series, as well as for the value and argument axes.

If you do not specify a pane for a series, it is displayed on the default pane. The default pane is specified by the chart's defaultPane property.

Show Example:
jQuery

In the example below, the pane's name option is used to identify panes.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { month: 'January', avgT: 9.8, minT: 4.1, maxT: 15.5, prec: 109 },
    { month: 'February', avgT: 11.8, minT: 5.8, maxT: 17.8, prec: 104 },
    { month: 'March', avgT: 13.4, minT: 7.2, maxT: 19.6, prec: 92 },
    { month: 'April', avgT: 15.4, minT: 8.1, maxT: 22.8, prec: 30 },
    { month: 'May', avgT: 18, minT: 10.3, maxT: 25.7, prec: 10 },
    { month: 'June', avgT: 20.6, minT: 12.2, maxT: 29, prec: 2 },
    { month: 'July', avgT: 22.2, minT: 13.2, maxT: 31.3, prec: 2 },
    { month: 'August', avgT: 22.2, minT: 13.2, maxT: 31.1, prec: 1 },
    { month: 'September', avgT: 21.2, minT: 12.4, maxT: 29.9, prec: 8 },
    { month: 'October', avgT: 17.9, minT: 9.7, maxT: 26.1, prec: 24 },
    { month: 'November', avgT: 12.9, minT: 6.2, maxT: 19.6, prec: 64 },
    { month: 'December', avgT: 9.6, minT: 3.4, maxT: 15.7, prec: 76 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'month'
        },
        panes: [
            { name: 'topPane' },
            { name: 'bottomPane' }
        ],
        series: [{
            pane: 'topPane',
            type: 'rangeArea',
            rangeValue1Field: 'minT',
            rangeValue2Field: 'maxT',
            name: 'Monthly Temperature Ranges, °C'
        }, {
            pane: 'topPane',
            valueField: 'avgT',
            name: 'Average Temperature, °C'
        }, {
            type: 'bar',
            valueField: 'prec',
            name: 'prec, mm'
        }
        ],
        valueAxis: [
          { pane: 'bottomPane', grid: { visible: true } },
          { pane: 'topPane', grid: { visible: true } }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});