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
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 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'm using the following code so that if a person clicks on one of the candlesticks in the chart, the tooltip actually stays on the page:
events: {
click: function(event) {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = event.currentTarget.chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
I'd like to move this from the series to the chart so that they can click anywhere on the page and have the tooltip stay. However, event.currentTarget.chart doesn't exist if they don't click on a candlestick. I looking through the result and can't find the corresponding tooltip. Can someone shed some light on this for me? Much appreciated!!
You can use this instead of event.currentTarget.chart as the context is the chart itself. Hence this.tooltip should give you the tooltip that you are looking for.
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.