JavaScript ChartsCombination Charts

A combination chart combines two or more series types allowing for flexible data visualisations. They are ideal for making visual comparisons of different sets of data in a single chart.

Combination Series Types

It is possible to create Combination Charts using the following series types: bar, line, area, scatter and bubble.

The type property must be specified explicitly on each individual series object in the series options array, as shown below:

series: [
    {
        type: 'bar', // use 'bar' series
        xKey: 'year',
        yKey: 'men',
        // ...other series options
    },
    {
        type: 'line', // use 'line' series
        xKey: 'year',
        yKey: 'portions',
        // ...other series options
    },
],

The snippet above shows the configuration required for a combination chart consisting of a bar and line series.

The example below demonstrates two common combination chart types. You can switch between these two combination chart types using the buttons above the chart. Please note:

• Series are rendered according to the order in which they are added in the series array.
• The area and line series are plotted on a Secondary Axis with a different scale.
• The series configurations are logged in the dev console when switching between combination charts.