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?
Related
I feel i've been searching the whole internet now to try and find the easiest way to get all the data from multiple lines, when hovering over a specific time in an highstock chart.
Can someone help me with that? :)
You can get information about hovered points by using mouseOver event or tooltip.formatter
Example for getting multiple points information when tooltip is shared:
tooltip: {
formatter: function() {
let tooltip = this.points.reduce(function(s, point) {
return s + '<br/>' + point.series.name + ': ' +
point.y + 'm';
}, '<b>' + new Date(this.x) + '</b>');
inf.innerHTML = tooltip;
return tooltip;
},
shared: true
},
Demo:
https://jsfiddle.net/BlackLabel/veqj67yf/
https://jsfiddle.net/BlackLabel/quympake/
API Reference:
https://api.highcharts.com/highcharts/series.line.point.events.mouseOver
https://api.highcharts.com/highcharts/tooltip.formatter
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
I have a line chart with a lot of series and I need to change the color of the hovered series and all its points.
A suggested approach is to use mouseOver and mouseOut events, and inside them run a .update method for the series and .setState method for all its points.
Unfortunately in my case this solution turns out to be laggy, so I've tried to avoid it.
I was able to change the color of the series without using .update methods, setting this.graph.stroke property, but I was unable to find a corresponding changeable property for its points: .graphic.stroke property seems to not be the right one (I've navigated through the series and points object through Firefox Developer tools).
JSfiddle relevant code:
events: {
mouseOver: function() {
originalColor = this.color;
this.graph.stroke="rgb(255,0,0)";
this.points.forEach(p => p.graphic.stroke="rgb(255,0,0)}");
//this.data.forEach(p => p.setState('hover'))
},
mouseOut: function() {
this.graph.stroke=originalColor;
this.points.forEach(p => p.graphic.stroke=originalColor);
//this.data.forEach(p => p.setState())
}
}
},
},
P.S.: the commented lines work but with a lot of series and points they run more slowly than this.graph.stroke=... so the change for points color appears not synchronized with that of series line.
So, my question is: which property of series.points can I access to change the color immediately?
Disable series states and use attr method to change stroke and fill colors:
plotOptions: {
series: {
states: {
hover: {
enabled: false
},
inactive: {
enabled: false
}
},
events: {
mouseOver: function() {
this.graph.attr({
stroke: "rgb(255,0,0)"
});
this.points.forEach(p => p.graphic.attr({
fill: "rgb(255,0,0)"
}));
},
mouseOut: function() {
this.graph.attr({
stroke: this.color
});
this.points.forEach(p => p.graphic.attr({
fill: this.color
}));
}
}
},
},
Live demo: https://jsfiddle.net/BlackLabel/dnr93Law/
API Reference:
https://api.highcharts.com/highcharts/series.line.states
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
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/
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.