We Keep Coding

Custom color & tooltip for a single bar in Highcharts histogram

I am trying to plot time-series data using Highcharts histogram & would like to have some way to highlight the bar that contains the latest datapoint (it will be the last element in the array) and also have a custom tooltip for the same.
So let's say I am plotting average daily temperatures for a city over a 1 year period -- how would I highlight the bar that contains the latest temperature & also provide a tooltip that indicates the same.
Lets say, in THIS Highcharts example the last 3 in the data array is the latest temperature & I would like to highlight, as well as provide a custom tooltip for the bar with that value.
Something similar has been discussed HERE but it doesn't talk about highlighting the relevant bar.

You can update the last point in load event and add a flag to distinguish it in the tooltip's formatter function:
chart: {
events: {
load: function() {
var histogramSeries = this.series[0],
lastPoint = histogramSeries.points[histogramSeries.points.length - 1];
lastPoint.update({
color: 'red'
});
lastPoint.isLast = true;
}
}
},
tooltip: {
formatter: function() {
if (this.point.isLast) {
return '<b>Last point result: </b> ' + this.y;
}
return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
}
}
Live demo: https://jsfiddle.net/BlackLabel/cefy419v/
API Reference:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/class-reference/Highcharts.Point#update

Chart.JS: Show custom labels permanentely on doughnut chart

How can I show custom labels permanently in a Chart.JS doughnut chart using chartjs-plugin-datalabels?
The example looks now like this:
Under https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#data-transformation, I found that the following code should change the labels to custom formatting:
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
Why doesn't this work in the example fiddle: https://jsfiddle.net/o4kyt69j/1/?

Okay, I didn't read properly...
Here's the solution: https://jsfiddle.net/o4kyt69j/2/
The code should be:
options: {
plugins: {
datalabels: {
formatter: function(value) {
return value + " kWh";
}
}
}
}

Angular 2 Highcharts how to use value from click events in component?

Am trying to access the value of the columns in my highchart stacked bar chart with the click event like this:
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click:function(event){
console.log(event);
//this.filter.emit([this.category, this.serie.name]);
alert('Name: '+ this.category + ', Value: ' + this.y + ', Series :' + this.series.name);
}
}
}
}
},
So far so good, but I need to use those values in my compoenent. The problem is that the 'this' keyword refers to the Point object and I dont see how i can use the parameters of my component if can't refer to them with 'this.'...
Is there a way to access both scope(my component and the Point object) in the function triggered by the click?

Series for tooltip only in highcharts

I need to use several series in tooltip in a highchart chart. These series should be completely invisible except tooltip. I 've tried setting visible to false. However in this case, legends for that series are still visible though faded. If I state "ignoreHiddenSeries: true", hidden series are not there at all and I cannot use them at tooltip. Is there a way for this type of usage? Currently I am keeping those series in global javascript arrays outside the highchart's scope and using them in tooltip formatter. I prefer to keep those data in highchart as well.
By the way setting showInLegend: false, visible: false also makes the series unusable in tooltip.

Each invisible serie should have two params:
visible: false,
showInLegend: false,
You need to use the tooltip formatter and use loop over each serie / each point to print values.
tooltip: {
formatter: function() {
var series = this.series.chart.series,
x = this.x,
each = Highcharts.each,
txt = '<span style="font-size: 10px">' + this.key + '</span><br/>';
each(series, function(serie, i) {
each(serie.data, function(data, j){
if(data.x === x) {
txt += '<span style="color:' + data.color + '">\u25CF</span> ' + data.series.name + ': <b>' + data.y + '</b><br/>';
}
});
});
return txt;
}
},
Example: http://jsfiddle.net/697e8seo/

highcharts: tooltip shows for spline but not scatter plot

I am using this code for Highcharts tooltip generation:
tooltip: {
shared: true,
crosshairs: true,
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': ' + point.y + ' m/s';
});
return s;
}
}
It works perfectly for charts which use spline for the defaultSeriesType but it doesn't work for scatter charts.
See this Fiddle http://jsfiddle.net/s83aT/ for both spline and scatter in action.
Any advice will be much appreciated. Thanks in advance.

After Sebastian Bochan pointed out that "shared: true" is part of the issue I looked into this some more and here is what I found out and how I ultimately solved the problem. For whatever reason the Fiddle linked in the question was screwed up.
shared: true
is required if there is more than one series in the chart and one wants to have all series displayed in the same tooltip. In my case this was a leftover from other plots I made but not needed in the single series plots my original question was about.
For single series plots "shared: true" should not be used. It defaults to "shared: false" and thus "shared" doesn't need to be included at all.
Here's the formatter code which I am now using and it works for all single series, whether it's spline or scatter:
tooltip: {
crosshairs: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +
'</b> ' + this.series.name + ': ' + this.y + ' deg';
}
},
See http://jsfiddle.net/Reality_Extractor/pNFYL/ for both spline and scatter plots in action.