Adding custom behaviours to the plotlines in Highcharts
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
var yourNamespaceHere = yourNamespaceHere || {};
yourNamespaceHere.deleteMe = function (plotLine) {
alert("Delete " + plotLine);
return;
};
$(function () {
$(document).ready(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Add Link in PlotLines'
},
xAxis: {
categories: ['Africa', 'America', 'Asia'],
},
yAxis: {
plotLines: [{
value: 450,
color: '#ff0000',
width: 2,
zIndex: 4,
id: 'PlotLine1',
label: {
text: 'PlotLine 1 ' + '<a href="javascript: alert(delete);" >DeleteME</a>'
}
}, {
value: 200,
color: '#000055',
width: 2,
id: 'PlotLine2',
zIndex: 4,
label: {
text: 'PlotLine 2 ' + '<a href="javascript: yourNamespaceHere.deleteMe(\'PlotLine2\');" >Delete</a>'
}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 50]
}, {
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}]
});
});
});