Is this possible? I want the other slices in the pie chart to adjust to a full circle when one is disabled in the legend, rather than just making an empty slice..
If you change the behavior of the legendItemClick event handler you can remove the sector instead of hiding it.
pie: {
point: {
events: {
legendItemClick: function (eventArgs) {
this.remove(); // Remove the point
eventArgs.preventDefault(); // Prevent the default behavior
}
}
},
showInLegend: true
}
This will only get you half the way though. The problem is that you cannot get the point back since it will be removed from the legend as well.
A way to get around this would be to add a reset button that brings back the original data set with series.setData(). See this jsfiddle example.
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 want hide tooltip and crosshair when screen resize but when I call method
this.chart.tooltip.hide();
Only tooltip hide , I dont see any method help hide crosshair.
After some fiddling around I found out that this works (for a button):
$('button').click(function() {
chart.update({tooltip: {enabled: false}, xAxis: {crosshair: false}}, true);
})
This disables the tooltip, and at the same time disables crosshair.
Note that setting tooltip: {crosshairs: false} in the update function will not do anything. Ref: tooltip.crosshairs.
crosshairs: Mixed
Since 4.1, the crosshair definitions are moved to the Axis object in order for a better separation from the tooltip. See xAxis.crosshair.
Working example: http://jsfiddle.net/q04df7wy/12/
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
Highcharts paints the chart as the page loads. For example when a simple bar chart is loaded, columns are painted on progressively.
Is there a way to disable this? I just want to chart as it is. No movements. I tried to set animation to false. But it does not work.
Jake He
The initial animation is hidden under a different "animation" option:
plotOptions: {
series: {
animation: false
}
},
Here's a JSFiddle using that option: http://jsfiddle.net/troygizzi/3w7noceq/
It was based on this one: http://jsfiddle.net/highcharts/VqruM/
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.