How to add percent symbol with data inside column in highchart? - charts

Question

I am using column highchart. Now I want % sign after my Data. Something like, if I have data value 7.18, I want to show it in 7.18% format. How can I do this? Please share with me if anyone has any idea.
My codes are below:
$('#cagr2').highcharts({
chart: {
type: 'column',
spacingBottom: -7,
spacingTop:20
},
title: {
text: ''
}, exporting: { enabled: false },
credits: {
enabled: false
},
xAxis: {
lineColor: 'transparent',
categories: ['']
},
yAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
//x: -10,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#ffffff',
borderWidth: 1,
shadow: true
},
tooltip: {
headerFormat: '<b>{point.x}</b>',
pointFormat: '{series.name}: {point.y}',
valueSuffix: ' %'
},
plotOptions: {
series: {
animation: {
duration: 7000
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
}
}
}
},
series: [{
name: 'Rate of return',
data: [parseFloat(cagr)]
}]
});

Answer 1

All you need to do here is add the format or formatter attribute to your dataLabels.
Example using format:
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
},
format: '{y} %', // your label's value plus the percentage sign
valueDecimals: 2 // show your label's value up to two decimal places
}
}
Example using formatter:
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '18px'
},
formatter: function() {
// numberFormat takes your label's value and the decimal places to show
return Highcharts.numberFormat(this.y, 2) + '%';
},
}
}
Here's how this will look:
I hope this helps!