JavaScript
// Plugin code
(function (Highcharts) {
Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (proceed) {
var tooltip = this.chart.options.tooltip;
// Run the original proceed method
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (!this.isHidden && tooltip.events && tooltip.events.hide) {
tooltip.events.hide();
}
});
Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) {
var tooltip = this.chart.options.tooltip;
// Run the original proceed method
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (tooltip.events && tooltip.events.show) {
tooltip.events.show(this.chart.hoverPoints);
}
});
}(Highcharts));
$(function () {
function setVisibility(setObject, setValue) {
setObject.element.setAttribute('visibility', setValue);
setObject.div.style.visibility = setValue;
}
function setClone(doWhat) {
chart.container.firstChild[doWhat+'Child'](cloneToolTip.element);
chart.container[doWhat+'Child'](cloneToolTip.div);
}
var cloneToolTip = null;
var clickedPoint = null;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
allowPointSelect: true,
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]
}, {
allowPointSelect: true,
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].reverse()
}, {
allowPointSelect: true,
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
}],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
// this function makes the ToolTip "stick" when its point is clicked by cloning it
click: function() {
var doClone = true;
// if there is currently a cloned ToolTip, remove it from the DOM before adding a...