I've searched and tested several solutions but it's really hard to find an answer to this seemingly easy problem:
I want to make points on this chart clickable (http://jsfiddle.net/a6yL8/)
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
url: [http://test.com/, http://test2.com/]
So far, I've only managed to make the values on the x axis clickable ( by adding them as a simple html a href code )
But I am unable to make the points on the chart clickable?
It's an easy question but nowhere could I find an answer and the AJAX example by the highcharts creators seems to be bugged.
Could anyone please help me?
to make the points on the chart clickable set allowPointSelect
as true
plotOptions:{
series:{
allowPointSelect: true
}
}
now you handle the click event or selection event from the
plotOptions:{
series:{
point:{
events:{
select: function(e){
//your logic here
}
}
}
}
}
I've updated your fiddle here http://jsfiddle.net/a6yL8/1/
API ref link : http://api.highcharts.com/highstock#plotOptions.series.point.events
I hope this will help you
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: 310px; height: 400px; margin: 0 auto"></div>
JQuery
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
},
cursor: 'pointer',
point: {
events: {
click: function() {
alert('okk');
}
}
}
}
},
legend: {
type: 'area',
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
click here jsfiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With