Multi-Series Chart

The Chart widget allows you to display several series. Learn how to define several series within the Chart's configuration object effectively.

You can specify series settings in the following three layers:

  • Common Series Settings
    To set a particular option to a common value for each series, use the commonSeriesSettings configuration object.
  • Common Type-Specific Series Settings
    To set a particular option to a common value for each series of a certain type, use the corresponding type-specific configuration object within the commonSeriesSettings configuration object. There are type-specific configuration objects for all series types: area, line, etc.
    Note that the series values that are set for a specific series type override common values.
  • Individual Series Settings
    To set series options to individual values, use the series array. The array items represent objects defining each series separately.
    Note that values set individually override the common and type-specific values.

The options that can be set for a particular series type are gathered in the Series Types Reference section.

Multi-Axis Chart

The dxChart widget can be configured so that series are displayed on one pane, but use different value axes. To learn about value axes and their configuration possibilities, refer to the Value Axis topic. In this topic, you will learn how to assign appropriate value axes to different series.

To introduce a chart with several series using different value axes, follow the steps below.

  • Set up Chart Options
    Create the dxChart widget and set it up as required using its configuration object.

    JavaScript
    $("#chartContainer").dxChart({
        //...   
    });
  • Define Series

    JavaScript
    $("#chartContainer").dxChart({
        commonSeriesSettings: {
            //...
        },
        series: [
            //...
        ]
    });

    To learn how to effectively define several series, refer to the Multi-Series Chart topic.

  • Define Value Axes

    JavaScript
    $("#chartContainer").dxChart({
        //...
        commonAxisSettings: {
            //...
        },
        valueAxis: [
            {name: 'percentAxis' },
            {name: 'valueAxis'}
        ]
    });

    Use the commonAxisSettings object to set option values that are common for all axes in the chart. Note that the values that are set in the individual definition of the axis override the corresponding common values. All value axis options are defined in the Reference help section. Note that the options that are defined within the commonAxisSettings object can be used within the individual value axis definition.

  • Specify Value Axes for Series

    JavaScript
    $("#chartContainer").dxChart({
        //...
        valueAxis: [
            {name: 'percentAxis' },
            {name: 'valueAxis'}
        ]
        series: [{
                  axis: 'percentAxis',
                  //...
            }, {
                  pane: 'valueAxis',
                  //...
            }
        ]
    });
Show Example:
jQuery

Multi-Pane Chart

The dxChart widget can be configured so that series are displayed on several panes. To learn about panes and their configuration possibilities, refer to the Panes topic. In this topic, you will learn how to display series on different panes.

To introduce a chart with several series displayed on different panes, follow the steps below.

  • Set up Chart Options
    Create a dxChart widget and set it up as required using its configuration object.

    JavaScript
    $("#chartContainer").dxChart({
        //...   
    });
  • Define Series

    JavaScript
    $("#chartContainer").dxChart({
        commonSeriesSettings: {
            //...
        },
        series: [
            //...
        ]
    });

    To learn how to define several series effectively, refer to the Multi-Series Chart topic.

  • Define Panes

    JavaScript
    $("#chartContainer").dxChart({
        //...
        commonPaneSettings: {
            //...
        },
        panes: [
            {name: 'topPane' },
            {name: 'bottomPane'}
        ]
    });

    Use the commonPaneSettings object to set option values that are common for all panes in the chart. Note that the values that are set in the pane's individual definition override the corresponding common values. All pane options are defined in the Reference help section. Note that the options that are defined within the commonPaneSettings object can be used within the individual pane definition.

  • Specify Panes for Series and Axes

    JavaScript
    $("#chartContainer").dxChart({
        //...
        panes: [
            {name: 'topPane' },
            {name: 'bottomPane'}
        ],
        series: [{
                  pane: 'topPane',
                  //...
            }, {
                  pane: 'bottomPane',
                  //...
            }
        ],
        valueAxis: [{
                  pane: 'topPane',
                  //...
            }, {
                  pane: 'bottomPane',
                  //...
            }
        ]
    });
Show Example:
jQuery