score:36
You need to combine the dataLabels
formatter and Highcharts.numberFormat:
...
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
}
...
See jsFiddle
score:2
I noticed in the comments you wanted to not display trailing zeroes.
This was the simplest solution I was able to muster:
...
dataLabels: {
enabled: true,
formatter: function () {
return parseFloat(this.y.toFixed(2)).toLocaleString();
}
}
...
If you don't want the number to end up with a comma-separator (depending on locale) remove the .toLocaleString().
Sidenote: Unfortunately using format (instead of formatter and a js func like we do above) is limited to a subset of float formatting conventions from the C library function sprintf, as indicated here on highcharts website. That library has the code g that would automatically do this for us but unfortunately it is not implemented in Highcharts :(, i.e. format: '{point.y:,.2g}' does not work.
score:3
In case someone wants to go "further", I'm showing data that can be 10^1 to 10^9 so I'm converting them and showing the unit afterwards.
Remember, Highcarts deals only with integers so if you want to add units (and not in the YAxis because of multiple units) you can give it in the source data but you have to format them afterwards:
column: {
dataLabels: {
enabled: true,
formatter: function () {
// Display only values greater than 0.
// In other words, the 0 will never be displayed.
if (this.y > 0) {
if (this.y >= Math.pow(10, 9))
{
return Highcharts.numberFormat(this.y /Math.pow(10, 9) , 1) + " mias";
}
else if (this.y >= Math.pow(10, 6))
{
return Highcharts.numberFormat(this.y /Math.pow(10, 6) , 1) + " mios";
}
else
{
return Highcharts.numberFormat(this.y, 0);
}
}
},
mias : stands for "milliards" (french translation of billiards) mios : stands for "millions" (french translation of millions)
score:23
I would simply add a the format option to data labels as follows:
dataLabels: {
enabled: true,
format: '{point.y:,.2f}'
}
It's the simple way of doing it without having to define a function using formatter.
extra:
The comma after the colon makes sure that a number like 1450.33333 displays as 1,450.33 which is nice also.
Source: stackoverflow.com
Related Query
- How to Format Highcharts dataLabels Decimal Points
- Highcharts - How to set datalabels format programmatically in Combo chart
- Customize tooltip and format the number to 2 decimal places of highcharts
- how to set the interval of points on Y - Axis highcharts
- How do I format x-axis label in highcharts
- How to convert datetime string to UTC to plot points on Highcharts
- How to convert datetime string to UTC to plot points on Highcharts
- how to make highcharts pie datalabels always in center of each slice?
- How can I delete all of the points from a highcharts series
- How to set the z-index of points on a HighCharts scatter plot?
- How to add new points to highcharts after plotting the first 'n' points?
- Highcharts How to get decimal point values on y-axis with big numbers
- HighCharts legend.value and legend.percent items to 2 decimal points Math.Round()
- Highcharts - how to toggle datalabels via js?
- How to format datetime for (x,y) pair data for Highcharts
- How to detect double clicks or long clicks on points in Highcharts charts?
- How to format my json data for stack column chart in HighCharts
- How to format the export button in Highcharts
- how to have datalabels only on selected points
- How to format dates in Highcharts on x-axis?
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to display 2 same highcharts without duplicate the code
- How to create data in Json format for highcharts
- How to edit tooltip in Highcharts C# code
- Highcharts JSON decimal data format issue
- How to set datalabels as vertical in Highcharts
- how to use highcharts tooltip formatter in python code
- highcharts axis format decimal point
- How to add exporting date and time as user format in Highcharts exporter?
- Highcharts how to create legends based on the value of points
More Query from same tag
- MS Surface tablet IE10 with Highcharts scroll page issue
- Upgrading highcharts version from 4.1 to 7.12 getting error Uncaught ReferenceError: Highcharts is not defined
- How to create overlapping bar charts in angular js?
- Highcharts Tooltip cropping
- Unable to update datatable in Highcharts
- web interface using jQuery for Java application
- Highcharts: horizontal line the whole width
- Highstock weird y-axis scale difference in same data dual series
- Highcharts: Combo Dual Axes with DrillDown
- Selectable text at Highcharts tooltip
- Highcharts, exclude data point from legend on pie chart
- HighStock y-axis labels changing by itself when horizontal scroll moves
- In Highcharts, how to reverse y-axis under "Bar" chart type?
- How to display no data found in highcharts
- Highcharts - how to set custom content in point tooltip (popup) on 3D scatter chart or how to customize point tooltip information?
- How to update the highcharts.js to make the export server to my own ipaddress,instead of connect to the highcharts server?
- Custom HighCharts - change the height of plotLines , show the marker value by default at a specific x and y
- Highcharts Data (using PHP JSON MYSQL)
- To move 3d chart Highcharts via mobile?
- How do I center a semi-circle doughnut chart?
- How to set the graph line chart dynamically?
- Dot Net Highcharts Series Color
- Highcharts steps to setup own server for download
- Highcharts, multiple parts chart
- highcharts - copy and paste the data on chart
- jQuery.HighchartTable custom tooltip
- How to adjust the spacing of grid lines in highcharts
- highchart 3d column - show "beta axis title" and "beta axis label"
- Highcharts Shadow/Fill Graph
- php to highchart, how to send the right array?