Peter Griffin
Peter Griffin

Reputation: 300

Highcharts combine chart types

I am using Highcharts and would like to combine 2 types of chart.

I would like a Bar with negative stack (changing the chart type to column) combined with Column with negative values so for each category, I have both positive and negative values.

I can't find any example of doing this so I don't even know if this is possible.

I did have a thought about doing something with the series like nested series but again don't know if this is possible and can't find an example.

enter image description here If what I'm trying to do possible?

Column with negative values

// Age categories
var categories = [
    '0-4', '5-9', '10-14', '15-19',
    '20-24', '25-29', '30-34', '35-39', '40-44',
    '45-49', '50-54', '55-59', '60-64', '65-69',
    '70-74', '75-79', '80-84', '85-89', '90-94',
    '95-99', '100 + '
];

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Population pyramid for Germany, 2015'
    },
    subtitle: {
        text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
    },
    xAxis: [{
        categories: categories,
        reversed: false,
        labels: {
            step: 1
        }
    }, { // mirror axis on right side
        opposite: true,
        reversed: false,
        categories: categories,
        linkedTo: 0,
        labels: {
            step: 1
        }
    }],
    yAxis: {
        title: {
            text: null
        },
        labels: {
            formatter: function () {
                return Math.abs(this.value) + '%';
            }
        }
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
        }
    },

    series: [{
        name: 'Male',
        data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
            -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
            -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
    }, {
        name: 'Female',
        data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
            3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
            1.8, 1.2, 0.6, 0.1, 0.0]
    }]
});

Bar with negative stack

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Column chart with negative values'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, -2, 5]
    }]
});

Upvotes: 1

Views: 1009

Answers (1)

Peter Griffin
Peter Griffin

Reputation: 300

Thanks to @Pawel Fus, I was able to do what I wanted and to remove the duplicate legend labels, I added showInLegend: false, in the series I wanted to hide the legend

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Column chart with negative values'
    },
    colors: Highcharts.getOptions().colors.splice(0, 3),
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        series: {
        stacking: true
      }
    },
    series: [{
        stack: 'john',
        name: 'John',
        data: [5, 3, 14, 7, 2]
    }, {
        stack: 'jane',
        name: 'Jane',
        data: [2, 12, 3, 2, 1]
    }, {
        stack: 'joe',
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }, {
        showInLegend: false,
        stack: 'john',
        name: 'John',
        data: [-5, -3, -4, -7, -2]
    }, {
        showInLegend: false,
        stack: 'jane',
        name: 'Jane',
        data: [-2, -2, -3, -2, -1]
    }, {
        showInLegend: false,
        stack: 'joe',
        name: 'Joe',
        data: [-3, -4, -4, -2, -5]
    }]
});

Upvotes: 1

Related Questions