CODEWITHSUNDEEP
highcharts
user1824963
user1824963

Reputation: 101

Highchart remove decimal places

I am using a highchart pie chart and displaying the data in the centre via.

function(chart1) { // on complete
  var xpos = '50%';
  var ypos = '50%';
  var circleradius = 40;

  // Render the circle
  chart1.renderer.circle(xpos, ypos, circleradius).attr({
    fill: '#fff',
  }).add();

  // Render the text 
  chart1.renderer.text(chart1.series[0].data[0].percentage + '%', 62, 80).css({
    width: circleradius * 2,
    color: '#4572A7',
    fontSize: '16px',
    textAlign: 'center'
  }).attr({
    // why doesn't zIndex get the text in front of the chart?
    zIndex: 999
  }).add();
});

However I would like to prevent displaying any decimal places, currently 33.33333%. I would like to display this as 33%

Is this possible, I know there is a setting allowDecimals but this did not work.

Upvotes: 0

Views: 347

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You get original percentage value from point, which it is not rounded. Use JS Math.round function: 

chart1.renderer.text(Math.round(chart1.series[0].data[0].percentage) + '%', 62, 80)
    .css({
        width: circleradius * 2,
        color: '#4572A7',
        fontSize: '16px',
        textAlign: 'center'
    })
    .attr({
        zIndex: 999
    })
    .add();

Live demo: https://jsfiddle.net/BlackLabel/0z4hLbaw/

Upvotes: 1

Related Questions