Configuration commonPaneSettings

An object defining the configuration options that are common for all panes in the dxChart widget.

Type: Object

Use this object's properties to set options for all panes at once. If you need to set an individual value for a common option, use the corresponding pane object within the panes array. The values that are set individually override the corresponding common values.

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' },
            { name: 'bottomPane', border: { visible: false } }
        ],
        commonPaneSettings: {
            border: {
                visible: true,
                left: false,
                right: false,
                top: false,
                color: 'blue'
            }
        },
        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' },
            { name: 'bottomPane', border: { visible: false } }
        ],
        commonPaneSettings: {
            backgroundColor: 'rgb(255, 255, 224)'
        },
        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' },
            { name: 'bottomPane', border: { visible: false } }
        ],
        commonPaneSettings: {
            border: {
                visible: true,
                left: false,
                right: false,
                top: false,
                color: 'blue'
            }
        },
        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'
        }
    });
});