This is my selection event handler in my code which I am for specific zoom timezones as you can see. What I am trying to achieve is to change the xAxis labels based on the zoom. Currently the following code does not work but I can not seem to find a solution to this problem online. Any thought?
Real question would be how can I alter highchart options through events. From the event parameter in the function I can access information but I can not change it.
I have two aproach, the first with changing inside event chart.redraw() will be called every time when chart is redrawn, for testing I added fired from a button.
redraw: function() {
let chart = this;
console.log(chart);
chart.xAxis[0].userMax = 8;
chart.xAxis[0].userMin = 2;
},
The next way is to update the axis object with a new set of userMax and userMin options.
chart.xAxis[0].update({
userMax: 8,
userMin: 2
}, true);
Live demo:
https://jsfiddle.net/BlackLabel/fcsd9hyo/
API References:
https://api.highcharts.com/highcharts/chart.events.redraw
https://api.highcharts.com/class-reference/Highcharts.Axis#update
Related
Currently it is possible for me to manually trigger hover event of highcharts like below code to show tooltip and highlight the series.
chart.series[0].points[2].onMouseOver()
However the state can be easily changed after moving the mouse.Is there a way for me to keep the state?
If you want to keep your tooltip visible when mouse pointer is out you need to disabled tooltip.hide functionality.
Highcharts.Tooltip.prototype.hide = function() {};
and highligt point again after mouse out:
events: {
mouseOut() {
let series = this;
series.points[2].onMouseOver();
}
}
Demo: https://jsfiddle.net/BlackLabel/xjzc25aL/
For those who are simply trying to make the tooltip visible for a longer time, there is the hideDelay property.
For example, to make it last 5 seconds you can write
chart.tooltip.options.hideDelay = 5000;
I need to make tooltip of some point make visible without moving mouse over the point. Say, I load my chart and have some tooltips already visible. Thanks for any help.
If you want the tooltip to show automatically on a point on load:
chart: {
events: {
load: function(){
// show tooltip on 4th point
var p = this.series[0].points[3];
this.tooltip.refresh(p);
}
}
},
Here's a fiddle.
Defaulty it is not available in the highcharts, but maybe better is using flags
Basically I want to do simple thing - save to user cookie chart xAxis.min and xAsis.max when user uses the Navigator, so that next time I could show him chart on the same selected period.
Is there some kind of onChange event or I have to read chart's parameters in setInterval?
You can use the xAxis.events.afterSetExtremes (API) or xAxis.events.setExtremes event. From your requirements I would assume that afterSetExtremes is sufficient.
If you want to only capture changes through the navigator you need to check
if(event.trigger == 'navigator'), otherwise you can just look at general changes.
Here is a JFiddle Highstock demo that shows the use of setExtremes event and what event.trigger values you can get.
Our purpose: We are working on a function that avoids overlapping dataLabels by repositioning. Doing so we are facing problems when updating the dataLabel position by the show event. To illustrate our problem we included a simplified example with a function that repositions the first dataLabel of each visible series by 30px to the top (y-direction). The reposition-function is fired by the show event.
... function adjustLables(chart, visibleIndex) {
console.log('dataLabels');
for (var i = 0; i < visibleIndex.length; i++) {
var index = visibleIndex[i],
dataLabel = chart.series[index].points[0].dataLabel,
adjY = dataLabel.y - 30;
chart.series[index].points[0].dataLabel.attr({
y: adjY
});
console.log(chart.series[index].name, 'dataLabel.y:', dataLabel.y, ', adjY:', adjY, dataLabel);
};
console.log('\n');
}; ...
Our problem:
Although our function adjusts the dataLabel.y property by applying .attr({y: adjY}), the dataLabel object does not behave in the way we expected.
For example: (see fiddle and the following description)
The repositioning works only once for a series that is shown by clicking the legend item for the first time. If one decativates and activates the same series again our adjustment does not work any longer.
(e.g. Activate series2 in our fiddle and you will see that its first dataLabel is moved 30px to the top. However, deactivate / reactivate series2 and the dataLabel is no longer moved 30px to the top but appears at its standard position.)
For debugging this mysterious deactivate/activate behavior we logged some information to the console after .attr() is called: seriesName, dataLabel.y, adjY, dataLabel-object. Surprisingly, although the dataLabel.y and adjY values are the same the dataLabel object itself remains unaffected at its y-property.
Overall we are wondering whether the show event is the proper way to "update" the dataLabel positions. Any experience or suggestions are very welcome.
I think this is caused mainly by animations, disable it for debugging: http://jsfiddle.net/pbNfz/1/ - works better now.
Also, see this very similar question.
Is there a way to get noticed when a chart is redrawn after the window size changed. Listen to the window change event itself is not a good idea cause I cant rely on which event if is fired first the one that is redrawn the graph or mine.
The chart redraw event fires when the chart div resizes http://api.highcharts.com/highcharts#chart.events.redraw
events: {
redraw: function () {
alert("redrawing chart");
}
}
Note, this fires for other reasons as well e.g. when you add a datapoint, or modify series options etc.