CODEWITHSUNDEEP
highcharts
Arpit Choudhary
Arpit Choudhary

Reputation: 108

HighCharts - Single legend for two columns in a Stack Column chart

I have four stack in a Stacked Column chart: "One Completed", "One Pending", "Two Completed", "Two Pending".

By default, I have four legends for these stacks.

What I want is to have two legends: "One" and "Two". Is it possible using Highcharts?

Edit: Added code. Some of text/logic are removed. Most of the styling is what I found on Internet somewhere.

Highcharts.chart('', {
    chart: {
        type: 'column',
    },
    title: {
        text: '',
    },
    xAxis: {
        categories: c,
        labels: {
            y: 40
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        stackLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            crop: false,
            overflow: 'none',
            y: 20,
            formatter: function () {
                return this.stack
            },
            style: {
                fontSize: '9px',
                color: (
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'gray'
            }
        }
    },
    credits: {
        enabled: false
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        formatter: function () {
            //custom logic
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        },
        series: {
            cursor: 'pointer',
            events: {
                click: function (event) {
                    //custom click to filter logic
                }
            }
        }
    },
    series: [{
        name: 'One Pending',
        data: one_series_pending,
        color: '#7cb5ec',
        stack: 'Pending'
    }, {
        name: 'One Completed',
        data: one_series_completed,
        color: '#7cb5ec',
        stack: 'Completed'
    }, {
        name: 'Two Pending',
        data: two_series_pending,
        color: '#434348',
        stack: 'Pending'
    }, {
        name: 'Two Completed',
        data: two_series_completed,
        color: '#434348',
        stack: 'Completed'
    }]
});

Sample chart: I want single legend for same color(two stacks) sample graph image

Upvotes: 2

Views: 771

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You can link one series with another and have one legend item for them by using linkedTo property.

    series: [{
        name: 'One Pending',
        data: [9, 5],
        color: '#7cb5ec',
        stack: 'Pending'
    }, {
        name: 'One Completed',
        data: [6, 2],
        color: '#7cb5ec',
        stack: 'Completed',
        linkedTo: 0
    }, {
        name: 'Two Pending',
        data: [35, 5],
        color: '#434348',
        stack: 'Pending'
    }, {
        name: 'Two Completed',
        data: [3, 0],
        color: '#434348',
        stack: 'Completed',
        linkedTo: 2
    }]

Live demo: http://jsfiddle.net/BlackLabel/eh5m10q9/

API Reference: https://api.highcharts.com/highcharts/series.column.linkedTo

Upvotes: 3

Related Questions