Highcharts replacing column/tooltip label - javascript

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?

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

Additional serires label in highcharts columnrange

I have an inverted columnrange chart in highcharts. I am able to create a unique label for the low and high point for each range.
But as the chart gets longer I would like to label each on the columns by their series name.
I need a third label? Possibly something above each range that would display the name of the series. So far, I'm using the formatter to give each point a unique label.
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y === this.point.low) {
return 'low: ' + this.y;
}
if (this.y === this.point.high) {
return 'high: ' + this.y;
}
return 'blah';
}
}
}
},
My fiddle: http://jsfiddle.net/zeus6ky9/6/
I ended up adding an additional invisible series for each series already there. And creating a label for it.

Highcharts y axis thousands separator

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, ',');
}
}
}

Categories