CODEWITHSUNDEEP
javascripthighcharts
Jon Snow
Jon Snow

Reputation: 11890

How to let user know that a Highcharts chart is clickable?

I'm using Highcharts Javascript library to generate charts.

I would like to make a chart clickable, which is supported by Highcharts using the syntax below:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart-container-revenue-per-purchaser',
        defaultSeriesType: 'line',
        events: {
            click : function() { location.href = '/revenue/purchaser' }
        }
    },

However, when you mouse over the chart, there's no visual changes (eg border of the graph appearing, cursor changing shape) to indicate to the viewer that the chart is clickable.

Is this something Highcharts supports or I have to implement it using CSS?

Thank you.

Upvotes: 2

Views: 3167

Answers (2)

rlemon
rlemon

Reputation: 17667

try this:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart-container-revenue-per-purchaser',
        defaultSeriesType: 'line',
        events: {
            click: function() {
                location.href = '/revenue/purchaser'
            }
        }
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert('clicked');
                    }
                }
            },
            marker: {
                lineWidth: 1
            }
        }
    }
});​

taken from http://www.highcharts.com/demo/line-ajax

This uses the 'cursor' option from plotOptions->serise

cursor : String
You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. Defaults to ''.

http://www.highcharts.com/ref/#plotOptions-series--cursor

Upvotes: 4

epascarello
epascarello

Reputation: 207557

Add this to the object

        plotOptions: {
            line: {
                allowPointSelect: true,
                cursor: 'pointer'           
            }
        },

Upvotes: 1

Related Questions