score:19

Accepted answer

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

score:0

https://stackoverflow.com/a/20964524 is nice.

but,

by default, click on line instead of point will also trigger click event, to only allow click on points: plotoptions.series.point.events.click

click: function (e) {
    let $target = $(e.target)
    if (!$('<b></b>').addclass($target.attr('class')).is('.highcharts-point, .highcharts-halo')) {
      return
    }
    // do your work below ↓
}

http://jsfiddle.net/m5e5r/42/

score:2

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


Related Query

More Query from same tag