without full screen
on full screen
In StockChart of highcharts whenever I use Measure (X,Y,XY) annotation and switch to full screen, the annotation does not reflow or is not consistent with the scale.
Is there a way to correct that?
https://www.highcharts.com/stock/demo/stock-tools-gui
That problem is a bug in Highcharts and it is reported here: https://github.com/highcharts/highcharts/issues/11174
As a workaround, you can update measure annotations in redraw event:
chart: {
events: {
redraw: function() {
this.annotations.forEach(function(annotation) {
if (annotation.options.type === 'measure') {
annotation.update();
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xc6eo0f7/
API Reference: https://api.highcharts.com/highcharts/chart.events.redraw
Related
I want to show some bars' tooltip as default (not all of them) without hovering on them. is there any way to do this?
After chart is loaded, you can use onMouseOver point's method to display a tooltip.
chart: {
events: {
load: function() {
this.series[0].points[3].onMouseOver();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/dnao0rv6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
In Highcharts time series currently we are able to zoom in data and we can reset zoom through button but i want something that can zoom out in steps in same manner like how we zoom in. Is there any way? Any help would be great.Thanks in advance
The idea is to find, after zooming selection, new xAxis extremes, and keep them in extremesXmin and extremesXmax arrays, then set these previous extremes after clicked resetZoomButton:
chart: {
zoomType: 'x',
events: {
selection: function(e) {
if (e.xAxis) {
extremesXmin.push(e.xAxis[0].min)
extremesXmax.push(e.xAxis[0].max)
}
zoomLevel++;
}
}
},
To control the button and set new extremes, you need to overwrite zoomOut() function inside showResetZoom() function inside Highcharts prototype:
function zoomOut() {
if (zoomLevel > 1) {
chart.xAxis[0].setExtremes(extremesXmin[extremesXmin.length - 2], extremesXmax[extremesXmax.length - 2])
extremesXmin.pop()
extremesXmax.pop()
zoomLevel--;
} else {
chart.zoomOut();
}
}
Working demo: https://jsfiddle.net/BlackLabel/h8af7L9g/
I recently upgraded to Highcharts 6, and noticed a marker animation that wasn't there before. I would like to disable it, and can't seem to do so. Before I raise it with Highcharts, I was wondering if I've done something wrong.
To be clear:
I would like on hover styling (increased marker radius and halo)
I do not want any animation on marker hover - either animating in, or animating out
To see the misbehaving markers, load this fiddle and move your mouse over a point and away again. If you comment out the recent Highcharts import and instead use 4.2.5, you'll see the behaviour I'm after.
The only way I can see in the docs to disable on hover animation is to set the animation duration to 0. I tried to do this at three points in the configuration:
plotOptions.spline.marker.states.hover.animation.duration
plotOptions.spline.states.hover.animation.duration
plotOptions.spline.states.hover.marker.states.hover.animation.duration
Like so..
plotOptions: {
spline: {
marker: {
states: {
hover: {
animation: {
duration: 0
}
}
}
},
states: {
hover: {
animation: {
duration: 0
},
marker: {
states: {
hover: {
animation: {
duration: 0
}
}
}
}
}
}
}
}
But nothing worked. Help very much appreciated. Thanks in advance!
Disabling chart.animation seems to resolve the problem. It disables overall animation for all chart updating but, as API states, it can be overridden for each individual API method as a function parameter.
API Reference:
http://api.highcharts.com/highcharts/chart.animation.html
Example:
https://jsfiddle.net/sgz9dq8h/
is it possible to link/sync 2 chart data in 2 different type of charts to show tooltips at once?
for an example, i have a pie chart and a area chart.
The pie chart represents the percentage of a particular browser and the area chart shows the downloads per year for each browser.
What i need to do is if someone clicks or hovers on section of the pie the relevant line and the tooltip of the area chart should be highlighted...
so when someone clicks/hovers on firefox on the pie, the line relevant to the area should show and vice versa...
is this something possible with highcharts?
So far the work i have done is https://jsfiddle.net/livewirerules/a9tntdam/1/
One thing that i noticed is i have added the event in my area chart to show the color when the tooltip is hovered.
events: {
tooltipRefresh: function(e) {
if (!e.target.hoverSeries) return;
$('.highcharts-tooltip>path:last-of-type')
.css('fill', e.target.hoverSeries.color);
}
}
when i hover a line on the area chart and move to the pie chart, the background color of the tooltips are changed.
I am not sure what would you like to show in a tooltip when you hover on your pie. You have one point so its hard to show tooltip for whole series on another chart.
You can use mouseOver and mouseOut events callback functions for highlighting series (so they will look like on hover):
point: {
events: {
mouseOver: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('hover');
}
});
},
mouseOut: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('');
}
});
}
}
},
You can use tooltip.refresh(point) for refreshing tooltip on specific point:
mouseOver: function(e) {
this.group.toFront();
this.markerGroup.toFront();
var name = this.name;
Highcharts.each(chart.series[0].data, function(p) {
if (name === p.name) {
p.setState('hover');
chart.tooltip.refresh(p)
}
});
},
Here you can see an example how it can work:
http://jsfiddle.net/a9tntdam/4/
I'm trying to show a hover colour on the highcharts large heatmap.
I've read a few posts but they're mainly around the smaller heatmap.
They suggest using Series.states.hover.color (http://jsfiddle.net/sgurhhm0/1/) but this method does not work for the large heatmap.
I have made a mockup of the large heatmap using point events;
point: {
events: {
mouseOver: function (e) {
if (this.color != '#3060cf') {
this.originalColor = this.color;
this.update({ color: '#3060cf' });
}
},
mouseOut: function (e) {
this.update({ color: this.originalColor });
this.originalColor = null;
}
}
}
http://jsfiddle.net/mattscotty/st3j35dx/
But I'd prefer to do it the correct way and this method is quite slow and seemingly cumbersome (and the code isn't very nice either).
Thanks in advance, Matt.