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/
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;
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.
By default, the tooltip appears as soon as the cursor enters the chart. I would like to control when it first appears in one of two ways:
Wait for user to hover over (around) a data point on the chart.
This way the user can look at the entire chart without the
distraction of the tooltip.
mousedown - is there a way to disable the default mousedown function
and use it for displaying the tooltip instead? And because the
tooltip and crosshair seem to be joined, perhaps the same mousedown
event could fire the crosshair to appear?
number 2 would be best; any suggestions/solutions would be appreciated!
Number 2 is possible to achieve by:
disable default Highcharts tooltip
create point.click event handler
in above handler, create your own tooltip (it's simple div with some CSS)
make proper position for tooltip (accessed via this.point.plotX and this.point.plotY
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.
I have a highchart displaying multiple series, each contains 100+ data points
I have a UI containing a checkbox for each series that when clicked calls the series.hide() or series.show() to toggle the hide/show of each line
My problem is that the hide and show are extremely slow such that I cant check one checkbox whilst processing from a previous is taking place
Does anyone know how to handle this?
Thanks
Rather than calling hide() for each series, call setVisible(false, false);. This second parameter is the redraw parameter, and you can avoid causing a redraw (which is slow) for each series.
Then, after you're done changing visibilities, call chart.redraw() once.
http://api.highcharts.com/highcharts#Series.setVisible
as answered in:
Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
highcharts draw each time a show or hide is called;
disabling and enabling the redraw function worked for me;
var _redraw = this.chart.redraw;
this.chart.redraw = function(){};
//do work
this.chart.redraw = _redraw;
this.chart.redraw();
How about adding visible: false for the series that are hidden before calling Highcharts.chart()?
Please see references: 1. Highcharts API and 2. Demo
In my case, above approach showed the best performance comparing to the followings:
series.hide()
setVisible(false, false)
setVisible(false, true) or setVisible(false, false); redraw();