Highcharts y axis thousands separator - javascript

How to add a thousands separator to the Y Axis of Highcharts?
This is what I have:
yAxis: [{ // Primary yAxis
labels: {

In addition to what #jfrej suggested:
If you're directly formatting an axis, use {value} for both yAxis and xAxis:
Fiddle for yAxis format
Fiddle for xAxis format
If you're formatting a point in a tooltip, you may want to use {point.y} and/or {point.x}:
Fiddle for tooltip.pointFormat
Fiddle for tooltip.pointFormat with valueSuffix extension
If you're directly formatting the point label, you may want to use {x} and/or {y}:
Fiddle for plotOptions.series.dataLabels, formatting all points
Fiddle for series.data.dataLabels, formatting specific point
So, since you're formatting yAxis, {value} should work as expected:
yAxis: {
labels: {
format: '{value:,.0f} €'
}
}

If you find the above solution not working, try to add this:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});

Code to format with comma
var UNDEFINED;
Highcharts.chart(...
...
yAxis: {
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, -1, UNDEFINED, ',');
}
}
}

Related

Highcharts AreaRange Chart issues with xAxis and last data point label

I used area range Highcharts but facing certain issues as:
For X-axis, the chart doesn't start with an initial point rather shows incorrect start tick value(i.e. 2020) instead of 2019.
Need to show label values for last data point only for each series, attached image below for reference
Could someone please help me with what do I do to resolve my issues.
Thanks in advance!
For the 1st issue, I tried changing the 'pointStart' attribute value for plotOptions->series but didn't work.
"plotOptions": {
"series": {
"pointStart": 1546300800000
}
}
Here is JSFiddle link of the chart containing code:
The first issue can be resolved by setting xAxsi.tickInterval = plotOptions.series.pointInterval:
xAxis: {
type: "datetime",
tickInterval: 31536000000
...
}
The second issue can be resolved by providing labels formatter callback function that will return only the last series point value. Also, other dataLabels properties have to be set properly (like align, overflow, etc). Check demo and code posted below.
Code:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'middle',
padding: 8,
allowOverlap: true,
overflow: 'allow',
crop: false,
formatter: function() {
var point = this.point,
series = this.series;
if (series.data.length === point.index + 1) {
return '$' + this.y.toFixed(1);
} else {
return '';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/2xLevj6y/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#formatter
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#align
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#overflow

Highcharts: Implement a second y-axis related to the first y-axis

For my graph, I have a single y-axis (y1), and I am trying to add a second axis (y2) which is a scaled version of y1.
Simply put, is it possible to do a graph like this. But I want a second axis, with the same scaling ratio, but in different units (i.e. that is multiplied by some k).
I have tried to just change the label on the yAxis:
` labels: {
format: '$ {value* price} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},`
But this hacky way does not seem to work for me.
In my case, I have a graph of percent change on y1, is it possible to put the price on y2?
I do not want to add another set of lines since I am already using 10, which would mean I would need 20 lines in total
Any help would be greatly appreciated!
You need to link the second axis to the first by linkedTo property and use formatter function to display some custom scale:
yAxis: [{}, {
opposite: true,
labels: {
formatter: function() {
return this.value * 1000
}
},
linkedTo: 0
}]
Live demo: http://jsfiddle.net/BlackLabel/j83pghta/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/yAxis.labels.formatter

Decrease x-axis label density in highcharts

I have a question about Highcharts.
This is my chart:
I want to decrease label of x-axis density, like y-axis.
Thanks so much for your helps.
Edit: for example: http:// jsfiddle.net /vuek2teg/1/
You can use xAxis.tickInterval.
xAxis: {
tickInterval: 20,
(...)
}
Demo: http://jsfiddle.net/BlackLabel/4a6snbqe/
API reference: https://api.highcharts.com/highcharts/xAxis.tickInterval
You need to set the step property of the xAxis labels:
xAxis: {
labels: {
step: 5 // number to skip
}
},
jsFiddle: http://jsfiddle.net/shanabus/rc21k44g/
Documentation: https://api.highcharts.com/highcharts/xAxis.labels.step

Highcharts how to make legends as data labels on scatter plot

I have a highcharts scatter plot, I want the marker to show the legend name instead of the data points,
to this
how can I achieve this. Any help is appreciated.
Here is the fiddle http://jsfiddle.net/pratik24/3ovbw8m9/
dataLabels: {
enabled: true,
allowOverlap:false,
align: 'left',
x:2,
y:15
}
I found a posible solution, you can add a formatter in the dataLabels
formatter:function(){
return this.series.name;
}
and in the legend you can add
labelFormatter: function () {
//you can return something
return '-';
}
here the fiddle http://jsfiddle.net/jgonzalez315/885pobv6/2/
I hope this help!

Highcharts replacing column/tooltip label

Is there any solution to replace Y column label "0" to "∞" (infinity) simbol?
Futhermore, I need "∞" insted of "0" in Highcharts tooltip.
Should I simply use formatter: function()?
Test example is here.
Thank you for assistance.
Like this?
yAxis: {
allowDecimals: false,
labels: {
formatter: function() {
return this.value || '∞';
}
}
},
Is the second question mean: "∞" replace Y value "0" in Highcharts tooltip?

Categories