CODEWITHSUNDEEP
highcharts
Maki
Maki

Reputation: 199

Highcharts, get the percentage in relation of a total numeric value

sorry in advance for my terrible english but it's really difficult explain my problem. I'm using Highcharts and I would create a graphic like this one.

Target graph

So the question is: is It possible to set a variable with a Total Value (in example of the image: 2.600), insert the series values and get the percentage in relation of the Total Value? Or in alternative set directly the percentage?

example 1 (favourite solution):

var total= 2.600

series: [{
            name: 'Serie1',
            data: [1560, 590, 1112, 2030]
        }, {
            name: 'Serie2',
            data: [260, 590, 1112, 435]
        }, {
            name: 'Serie3',
            data: [780, 1770, 556, 435]
        }]

So it calculate automatically the percentage.

example 2:

series: [{
            name: 'Serie1',
            data: [60%, 20%, 40%, 70%]
        }, {
            name: 'Serie2',
            data: [10%, 20%, 40%, 15%]
        }, {
            name: 'Serie3',
            data: [30%, 60%, 20%, 15%]
        }]

Upvotes: 1

Views: 601

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7896

For point y value only numbers are accepted. It is possible to use stackLabels for a total value and use formatter of dataLabels to return a percentage of total - since this.total for stacked series is available this shouldn't be a problem.

    yAxis: {
        reversedStacks: false,
        stackLabels: {
            enabled: true,
            align: 'left',
            y: -20,
            x: 100
        }
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return Math.round(this.y / this.total * 100) + '%';
                }
            }
        }
    },

Example: http://jsfiddle.net/0rq6sdtf/

Upvotes: 1

Related Questions