CODEWITHSUNDEEP
javascriptjqueryhighcharts
Ashish Sherashia
Ashish Sherashia

Reputation: 100

How to modify Column stacked percent Chart in Highcharts

This is what I want I want to change the functionality of this chart: http://www.highcharts.com/demo/column-stacked-percent

in such a way that, when i click on the legend the percentage that is being calculated should be formulated from all the data series rather than just the visible ones. Right now clicking on legend it the column always becomes 100%.

Upvotes: 1

Views: 959

Answers (2)

Kacper Madej
Kacper Madej

Reputation: 7886

It is possible to set ignoreHiddenSeries to false, but in that case hiding series other than the top one will not make other series fall down to fill the gap in the stack.

Example: http://jsfiddle.net/pahyq9b9/

Another solution would be to parse your data and use normal stacking instead of percent, because normal stacking will only move other points and will not change point values.

Upvotes: 1

Siddharth
Siddharth

Reputation: 869

try this fiddle, what i have done is i have used formatter instead of pointformat 

  tooltip: {
        formatter: function () {
            var s=0;
            var r="<span>"+this.x+"</span><br/>"


            $.each(this.points, function (i,v) {
                console.log(v);

                r+='<span style="color:'+v.color+'">'+v.series.name+'</span>: <b>   '+v.y+'</b>  '+((v.y*100)/total)+'% <br/>'
            });

            console.log(r);
            return r;

        },
        shared:true
    },

and more to this i have added some global variables

var obj=Highcharts.charts[$("#container").data('highchartsChart')]; 

var total=0;
for(v of obj.options.series){
    for(z of v.data){
    total+=z;
  }
}
console.log(total);

Upvotes: 1

Related Questions