Develop Reference

Use series data but display custom text on top of columns Highchart

I'm trying to use highchart, working with colums.
My series data are some hours.
For example, if my data is 23.75, it means 23:45 hours.
I would like to use my 23.75 data so that my colums are in the right place, but the little text on top of my column displays "23:45".
Is it possible ? I can't find the right option to do this.
Thanks in advance !

you can format data label values by formatter
dataLabels: {
enabled: true,
formatter: function () {
return this.y; // you can update datalabel values here
}
}

Found it !
stackLabels: {
enabled: true,
formatter: function() {
return this.total // custom text label here
}
}

How to add % symbol to Y axis values in HighChart graph?

I'm trying to add % after the 100 or -100 yAxis in the chart above.
I tried to add the % symbols like so:
quotes.data.frequency_counts[i].negative = Math.round(negative * -1)+'%';
quotes.data.frequency_counts[i].positive = Math.round(positive)+'%';
However got an error saying strings are not allowed as data_points, which makes sense, but still hoping there is a way to get the % sign displayed so the user knows what we are showing them.
This isn't my app, however it is a HighChart that is editable in plunker: http://plnkr.co/edit/8mDQD1?p=preview

You can use a label formatter for that:
yAxis: {
title: { text: 'Temperature (Celsius)' } ,
labels: {
formatter: function() {
return this.value + '%';
}
}
}
Here's an updated (now nonsensical) Plunker showing the changes

Highcharts: Format all numbers with comma?

I'm using Highcharts and I want to format all numbers showed anywhere in the chart (tooltips, axis labels...) with comma-separated thousands.
Otherwise, the default tooltips and labels are great, and i want to keep them exactly the same.
For example, in this chart, the number should be 2,581,326.31 but otherwise exactly the same.
How can I do this?
I tried adding:
tooltip: {
pointFormat: "{point.y:,.0f}"
}
But this got rid of the nice circle and series label in the tooltip - I'd like to keep that. And ideally I'd prefer to use a single option to set global number formatting, across the whole chart.

This can be set with the thousandSep (API) global option.
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
See this JSFiddle example.

This way worked with me.
I configured in yAxis option.
yAxis: {
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2);
}
}
}

In case you want to show numbers without commas and spaces.
eg. by default 9800 shows as 9 800.
If you want 9800 to be shown as 9800
you can try this in tooltip:
tooltip: {
pointFormat: '<span>{point.y:.f}</span>'
}

This way work for me.
I use Angular 10 and I did this for Tooltip and yAxis.
for yAxis use numberFormat:
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
},
formatter: function() {
return Highcharts.numberFormat(this.value, 3);
}
},
and for Tooltip :
{point.y:.f}

Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover

Is it possible to combine the following?
Fiddle 1 (answered by mäksä) as a main template:
Single horizontal stacked bar with bar segments
Combined with the following features of Fiddle 2 (answered by aus_lacy):
Always visible on bar segments:
Data names (labels) (i.c. "apples", "pears",...)
Percentages (calculated if possible: "50%","50%",...)
Shown on mousehover:
Original data numbers (i.c. "15","15",...)
Series name/description (i.c. "Browser share")
Almost but not quite:
An example of a horizontal bar chart with "percentages" always shown, and "original data numbers" on mousehover can be found in Fiddle 3 (answered by jlbriggs), but there the "data names" are lacking, and I can't find a way to change the "series name". Further more: this is a horizontal bar chart, but this is not a single stacked one.
Any help would greatly be appreciated, many thanks.

Again it's a simple modification of the Highcharts attributes in particular this small snippet:
bar: {
dataLabels: {
enabled: true,
distance : -50,
formatter: function() {
var dlabel = this.series.name + '<br/>';
dlabel += Math.round(this.percentage*100)/100 + ' %';
return dlabel
},
style: {
color: 'white',
},
},
},
I think this snippet is what you are after?

Highcharts => Getting the id of a point when clicking on a line chart

I am building a line chart and I would like, when I click on a point of the line, to display a popup containing some data about this point.
The issue I try to resolve is to get the id, the series associated with this point or something like that.
Here is my code :
plotOptions: {
column: {
pointWidth: 20
},
series: {
cursor: 'pointer',
events: {
click: function(event) {
requestData(event.point);
}
}
}
I tried
requestData(this.point)
,
requestData(this.point.id)
also but it doesn't work.
How do we get the id of a point ?
Thanks a lot.

According to the docs, event.point holds a pointer to the nearest point on the graph.
So I'd write the event.point to the console, and see what's available.
console.log(event.point);
From the docs:
click: Fires when the series is clicked. The this keyword refers to the series object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. Additionally, event.point holds a pointer to the nearest point on the graph.
Example based on the example from the docs: http://jsfiddle.net/5nTYd/
Click a point, and check the console.

I just did this by passing 3 objects into the series data array and then pulling it out of the object's config attribute from the click.
So you can construct your series data something like this:
series: [{
name: 'Example',
yAxis: 0,
type: 'spline',
data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]
In the data attribute above the 1st element is the date (x), the 2nd element is another data point (y), and the 3rd is the id of the object that represent that data object. This "z" will not show up on the graph but will show up as the 3rd element in the config array. For example: using plotOptions point attribute to capture the click, the ID of the object is in the alert as this.config[2]
plotOptions: {
series: {
cursor: 'pointer',
point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])}}}
}
},

To return the 'ID' of the selected point on the chart use the 'X' value:
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(event) {
// Log to console
console.log(event.point);
alert(this.name +' clicked\n'+
'Alt: '+ event.altKey +'\n'+
'Control: '+ event.ctrlKey +'\n'+
'Shift: '+ event.shiftKey +'\n'+
'Index: '+ event.point.x);
}
}
}
},
See an example here: http://jsfiddle.net/engemasa/mxRwg/

I had the same problem ... if I understand correctly.
My solution is this, to get the id of the series ...
See if it helps ...
plotOptions{
series:{
cursor: 'pointer',
events: {
click: function(event) {
console.log(event.point.series.userOptions.id);
}
}
}

i found this old post in my search to ==>add a marker to a point when i click a Highcharts "Trend Line" [in examples: "line-time-series"] chart[when i click anywhere on the drawn line itself]. well, without showing you too much code, look in the
cursor: 'pointer',
point: {
events: {
click: function(e) {
alert("X("+this.x+"),Y("+this.y+")");
}//click
}//events
}//point
if you would like more detail, i'm happy to provide!

plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
console.log(this);
alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])
}
}
}
}
},