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.
Related
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
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 am trying to do the same as regular zooming, but I use:
events : { selection : function(event) {
instead of the regular zooming (it is part of something --> Launch Highcharts zooming programmatically (after a selection))
The problem. When I select (via selection, like zooming) an interval (for example something between 00:00 and 01:00) the zoom shows another area. How can I solve this?
http://jsfiddle.net/FSfR2/4/
You've overcomplicated your problem, just pass the min and max you get in the event to the setExtremes function
chart.xAxis[0].setExtremes(event.xAxis[0].min, event.xAxis[0].max);
http://jsfiddle.net/bhlaird/wmyM4/
I took the jsFiddle from the "Highcharts Demo - VU meter" example and made a few changes to demonstrate my problem. My modified version: http://jsfiddle.net/kCpTt/
Inside the timer loop that updates the VU Meters I added this code to also call the update() method for each of the yAxis elements. (Note: In the code I am using in my project I actually pass some updates to the yAxis but those are irrelevant because this problem exists regardless of what gets passed in, including this empty object)
chart.yAxis[0].update({});
chart.yAxis[1].update({});
I also set just one of the yAxis labels to "useHTML:true" and left the other as default. If you inspect the labels (using Firefox or Chrome Developer Tools) you will see that every time the timer fires and it updates the data points, only the yAxis label that uses HTML gets an empty <div style="position: absolute; left: 0px; top: 0px;" class="highcharts-axis-labels"></div> left behind as it creates a new one for the label. The other one that does not use HTML does not get these orphaned divs.
Edit: I'm convinced this a bug so I filed an actual bug report: https://github.com/highslide-software/highcharts.com/issues/1960
Edit 2: And just like that... the bug has been fixed. Awesome work. https://github.com/highslide-software/highcharts.com/commit/9d60d9f4aaf5cdc266c1daabf43ccddc103d0115
The new fix didnt help me so I made a hack.
On chart use the load event to remove the position from the bugged div
events: {
load: function(event) {
$('#YOURCONTAINER div.highcharts-container div.highcharts-axis-labels').css("position", "");
}
}
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.