Should be easy, I have negative values in a Highcharts bar chart that when I make the format ${y} the value comes out as $-157, what is the correct syntax to make the label -$157?
Thanks,
CM
I am unsure if there is a built-in option in Highcharts to do this for currencies, but a way you could achieve this is by using the formatter callback like this:
dataLabels: {
enabled: true,
formatter: function() {
return (this.y >= 0 ? '' : '-') + '$' + Math.abs(this.y)
}
}
Working JSFiddle example: http://jsfiddle.net/ewolden/4o7k210s/
Related
I have one Bubble Highchart and need to display Y-Axis price value as price range like '1-10', 11-20', '21-30'
But I am not able to achieve the same.
How can I achieve this?
Hello ppotaczek, Thank you very much for your quick response. I am trying achieve the bubble chart with below screen-shot.
Please refer this screen-shot
Thanks
You can simply use formatter function:
yAxis: {
labels: {
tickInterval: 25,
formatter: function() {
if (this.value > 0) {
return this.value - 24 + ' - ' + (this.value);
}
return this.value;
}
},
}
Live demo: https://jsfiddle.net/BlackLabel/3rqdn5pj/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickInterval
https://api.highcharts.com/highcharts/yAxis.labels.formatter
Can you please take a look at this example and let me know how I can format the dataLabels to be display only with two decimal numbers?
Here is the numver formats which I have in the series
series: [{
name: 'Tokyo',
data: [7.554555, 6.34345559, 9.5555, 14.5555, 18.4333433, 21.5555, 25.2, 26.5333333, 23.33333, 18.23243543, 13.776565669, 9.65454656]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
and I would like to present them like 7.55 , 6.34, 9.55 . Thanks
You need to combine the dataLabels formatter and Highcharts.numberFormat:
...
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
}
...
See jsFiddle
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.
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)
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.
I'm using dotnet.highcharts to generate a chart.
If I do not set any label formatting on the y-axis labels, this is what is displayed.
This is good.
So 200M = 200,000,000
And it looks like this is done automatically.
If I wanted to put a $ in front of the value and I use:
function() { return '$' + Highcharts.numberFormat(this.value, 0) ; }
Then the label will now display $200,000,000.
How would i get the format to display it with the short form with the dollar sign like $200M ?
thanks.
Unfortunately in this case, you have to either take the pre formatted label, or rebuild the level of abbreviation you want in the formatter yourself.
In this case, you could something like
yAxis: {
labels: {
formatter: function() {
return '$'+this.value / 1000000 + 'M';
}
}
},
According to this stackoverflow post, you can call the original formatter with:
this.axis.defaultLabelFormatter.call(this);
Put this code before call the chart
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Highcharts does a great job auto-formatting dates both on the x-axis and in tooltips. Unfortunately I need a custom function to format my y-values, and /plotOptions/line/tooltip/pointFormat accepts only a format string and not a function, so I have to set /tooltip/formatter instead. How do I get hold of the formatted date (e.g. Oct'13 or 20. Oct) as shown on the x axis? I don't seem to have access to point.key from there, only the raw millis value.
http://jsfiddle.net/9Fke4/
You can use dateFormat()
tooltip: {
formatter: function() {
return '<b>' + Highcharts.dateFormat('%b\' %d',this.x) + ':</b> ' + this.y;
}
},
http://jsfiddle.net/9Fke4/1/
FWIW, this was answered in a Highcharts issue on Github
formatter: function() {
var tooltip = this.series.chart.tooltip,
item = this.point.getLabelConfig(),
header = this.series.chart.tooltip.tooltipFooterHeaderFormatter(item);
return header + this.y;
}
Corresponding fiddle:
http://jsfiddle.net/9Fke4/12/
If you are using a shared series:
tooltip: {
formatter: function (tooltip) {
var header,
s = [];
$.each(this.points, function(i, point) {
if(header == null) {
var config = point.point.getLabelConfig();
header = tooltip.tooltipFooterHeaderFormatter(config);
}
s.push(point.y);
});
return header + s.reverse().join('<br>');
},
shared: true
}
conver the raw milliseconds to a date object using
var currentDate = new Date (tome in milliseconds)
in the tootip/formatter function you have defined.
this will give you good control over the date. you can use currentDate.getMonth(), getDate(), getDay(), etc methods to get the information you want from that date.
build a string with the above info and return.
I hope this will help you.
The solution I ended up with is to pre-format the y-values and store them as part of the series data; the pre-formatted values can then be referenced from the tooltip headerFormat and pointFormat, where they can be used along with {point.key}, which contains the auto-formatted date (and which is not available when providing a custom tooltip formatter):
http://jsfiddle.net/uG3sv/
Hi I'm using the following example:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setcompare/
How do I a change format of the values on the y-axis. For example when I choose percentage i want the values to be displayed as +25%. I now how to initially set up this up but how do I change it with Jquery script.
formatter: function () {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
/S
If you use formatter in the tooltip, you should have this.y instead of this.value.
formatter: function() {
return (this.y > 0 ? '+' : '') + this.y;
}
http://jsfiddle.net/6neGD/1/
I solved it. Just use
chart.options.yAxis[0].labels.format = '{value} %';
to display label as percentage