CODEWITHSUNDEEP
javascripthighchartspercentage
alioygur
alioygur

Reputation: 5464

Highcharts make percentage column chart

How can i make percentage column chart ?

Like this http://www.highcharts.com/demo/column-basic

Not like this! http://www.highcharts.com/demo/column-stacked-percent

Thanks a lot for your help.

Upvotes: 0

Views: 7950

Answers (2)

manoj rana
manoj rana

Reputation: 9

Use this one:

chart.series[0].update({
          dataLabels:{
                enabled:true,
                formatter:function() {
                    var mytotal = 0;
                    for (i = 0; i < chart.series.length; i++) {
                        if (chart.series[i].visible) {
                             for (j = 0; j < chart.series[i].yData.length; j++) {
                                 mytotal += parseInt(chart.series[i].yData[j]);
                             }
                            console.log("Total : "+ i + " Total : "+ mytotal + " length" + chart.series[i].yData.length);
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }
    });

Upvotes: 1

TechnoCrat
TechnoCrat

Reputation: 708

enter image description here

jsfiddle demo 

var data = [{
        name: 'A',
        data: [72, 50, 52]
    }, {
        name: 'B',
        data: [23, 41, 12]
    }, {
        name: 'C',
        data: [18, 9, 11]
    }, {
        name: 'D',
        data: [89, 46, 54]
    }];
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Group 1', 'Group 2', 'Group 3']
        },
        yAxis: {
            title: {
                text: null
            }
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true
                }
            },
            series: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        var mychart = $('#container').highcharts();
                        var mytotal = 0;

                        for (i = 0; i < mychart.series.length; i++) {
                            if (mychart.series[i].visible) {
                                mytotal += parseInt(mychart.series[i].yData[0]);
                            }
                        }
                        var pcnt = (this.y / mytotal) * 100;
                        return Highcharts.numberFormat(pcnt) + '%';
                    }
                }
            }
        },
        title: {
            text: 'Example'
        },
        series: data
    });

Upvotes: 2

Related Questions