I have a highcharts graph, and I allowed the user to dynamically create their own Flags. Now I want to be able to click on the flag itself and be able to keep it's tooltip showing the whole time until I click on the flag again. The reason for this is to allow the user to give special meaning to points, and when they save the graph as an image, I want it to show the tooltip information they left on.
Anyone know how to do this or go about this? I can't figure out how to access the flags tooltip
plotOptions: {
series: {
allowPointSelect: true,
animation: false,
dataGrouping: {
force: true,
smoothed: true
}
},
line: {
allowPointSelect: true,
animation: false,
point: {
events: {
click: function () {
var thePoint = this;
var previousFlag = findFlag(thePoint);
if (previousFlag != null) {
previousFlag.remove();
} else {
createFlagForm(thePoint);
}
}
}
}
},
flags: {
point: {
events: {
click: function() {
//How to access the tooltip? this means the flag point itself
}
}
},
tooltip: {
useHTML: true,
xDateFormat: "%B-%e-%Y %H:%M"
}
}
},
I just whipped this up. When you click a point it will persist the tooltip. It does this by cloning the tooltip svg element and appending it to the plot.
Here's a fiddle.
$(function () {
cloneToolTip = null;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});