CODEWITHSUNDEEP
highchartspie-chart
Timothy Utrecht
Timothy Utrecht

Reputation: 3

How to add the categories inside the slice and show the absolute number instead of the relative number

I created a pie chart in highchart, but I am facing two difficulties at which I am stuck:

  1. How can I put the category name inside the slices?
  2. How can I change the relative numbers into the absolute numbers?

I searched around at different fora and and the highchart webpage, but I just can not find the solution. Can you help me how to solve it and also where you found the solution, as I am new to high chart and still learning.

Added is my basic jsfiddle. Thanks in advance

http://jsfiddle.net/uhydP/209/

$(function () {
var chart = new Highcharts.Chart({
    tooltip: {
        enabled: false
    },
    chart: {
        renderTo: 'container', //Dat is waar hij heen moet
        type:'pie', // Type die we hebben gekozen
        backgroundColor: '#281e82',
        borderColor: '#281e82',
        borderWidth: 0
    },

    xAxis: {
        categories: ['Sparen', 'Aflossen'], // De namen
        color: 'black',
    },
    credits: {
        enabled: false // Geen verwijzing naar highchart
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return Math.round(this.percentage*100)/100 + ' %';
                },
                distance: -60, // Hoe ver naar binnen de teksten staan
                color:'black' // De kleur van de percentages
            },
            animation: {
                duration: 2000
            }
        }
    },

    title: {
        text: 'Testje',
        style: {
            color: 'white',
            fontWeight: 'bold'
        }
    },

    series: [{
        data: [{y: 30, color: 'white'}, {y: 70, color: '#E50000'}]        
    }]
});

});

Upvotes: 0

Views: 1022

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

The names can be added in the datalabels formatter, 

 formatter: function() {
                    var cat = this.series.chart.xAxis[0].categories,
                        x = this.point.x;

                    return 'name: ' + cat[x] + '<br>' +  Math.round(this.percentage*100)/100 + ' %';
 },

http://jsfiddle.net/uhydP/214/

Upvotes: 1

Related Questions