CODEWITHSUNDEEP
javascriptjqueryajaxhighchartsfrontend
user3010273
user3010273

Reputation: 900

Highcharts - making a point clickable?

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?

Upvotes: 6

Views: 15965

Answers (3)

vikyd
vikyd

Reputation: 2033

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/

Upvotes: 0

Strikers
Strikers

Reputation: 4776

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

Upvotes: 20

Gopal Joshi
Gopal Joshi

Reputation: 2358

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

Upvotes: 2

Related Questions