I using column stacked and grouped chart for paring.

Check this example code : @fiddle /

I am trying to pare two male stacks

I want the grouped chart have same colors for the item and no repeated legends.

i.e where ever john is used it should have same color and legand should have only one john not two.

Can any one help me on this code.

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'column'
            },

            title: {
                text: 'Total fruit consumtion, grouped by gender'
            },

            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },

            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Number of fruits'
                }
            },

            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },

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

            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2],
                stack: 'male'
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5],
                stack: 'male'
            }, {
                name: 'John',
                data: [2, 5, 6, 2, 1],
                stack: 'male2'
            }, {
                name: 'Joe',
                data: [3, 0, 4, 4, 3],
                stack: 'male2'
            }]
        });
    });

});

I using column stacked and grouped chart for paring.

Check this example code : @fiddle http://jsfiddle/wvT85/

I am trying to pare two male stacks

I want the grouped chart have same colors for the item and no repeated legends.

i.e where ever john is used it should have same color and legand should have only one john not two.

Can any one help me on this code.

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'column'
            },

            title: {
                text: 'Total fruit consumtion, grouped by gender'
            },

            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },

            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Number of fruits'
                }
            },

            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },

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

            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2],
                stack: 'male'
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5],
                stack: 'male'
            }, {
                name: 'John',
                data: [2, 5, 6, 2, 1],
                stack: 'male2'
            }, {
                name: 'Joe',
                data: [3, 0, 4, 4, 3],
                stack: 'male2'
            }]
        });
    });

});

• javascript
• highcharts

Share Improve this question Follow asked Sep 10, 2012 at 1:53 PrinceyesurajPrinceyesuraj 5,45866 gold badges2424 silver badges2727 bronze badges 4

• 1 Why do you have 2 Johns to begin with? I don't understand what the distinction is – Ben McCormick Commented Sep 10, 2012 at 1:59
• @ben336 i a paring two series so each series is having john. I am identifying the different series using the stack. here two stacks are male and male2 – Princeyesuraj Commented Sep 10, 2012 at 2:02
• Could you give us some insight to what you are actually trying to visualize? May be there is a better visualization alternative? – Jugal Thakkar Commented Sep 10, 2012 at 5:12
• @JugalThakkar: I want visualize a parison chart. I am achieving it by using the stack option here. in this demo male stack is pared with male2 stack. Is there any other way to visualize that. – Princeyesuraj Commented Sep 10, 2012 at 5:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Use LinkedTo...

http://api.highcharts./highcharts#plotOptions.series.linkedTo

The demo of it is below:

linkedTo: ':previous',

http://jsfiddle/gh/get/jquery/1.7.2/highslide-software/highcharts./tree/master/samples/highcharts/demo/arearange-line/

That way the legend is still functional, and you don't need to set the colors the same.

I ran into the same problem recently. So what I did is, bine two of the answers above to solve the problem.

http://jsfiddle/sanshila/2g79dhds/1/

series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male',
            color: '#6666FF',
            events: {
                legendItemClick: function (event) {
                    this.visible ? this.chart.get('johnId').hide() : this.chart.get('johnId').show();
                }
            }
        }, {
            name: 'John',
            id: 'johnId',
            color: '#6666FF',
            showInLegend: false,
            data: [2, 5, 6, 2, 1],
            stack: 'male2'
        }]

You can manually define the series colors and hide the 2nd set in the legend to do what you want, but this doesn't really link the data. It won't hide both johns if you click in the legend for instance. This type of associating 2 points in different series isn't supported as far as I know. I would say that I think you might want to rethink how you're representing your data, I still don't understand what you're trying to acplish.

series: [{ name: 'John', color:'blue', data: [5, 3, 4, 7, 2], stack: 'male' }, { name: 'John', color:'blue', showInLegend:false, data: [2, 5, 6, 2, 1], stack: 'male2' }] });

http://jsfiddle/wvT85/2/

I think this is what you want: http://jsfiddle/b3AF9/21/

As Ben said, manually set the color for the stacks. Then give ids to the second stack and add

event: {
  legendItemClick: function(event){
     this.visible? 
       this.chart.get('Joe2').hide() :
       this.chart.get('Joe2').show();
  }
}

to series in the first stack.