javascript - Change cursor on legend after disabling click - Stack Overflow

How do i change the cursor to 'default' instead of using 'pointer'?

I disabled my graph using this:

plotOptions: {
    line: {
        events: {
           legendItemClick: function () {
               return false;
           }
        }
     }
 }

But the cursor is the pointer cursor.

How do i change the cursor to 'default' instead of using 'pointer'?

I disabled my graph using this:

plotOptions: {
    line: {
        events: {
           legendItemClick: function () {
               return false;
           }
        }
     }
 }

But the cursor is the pointer cursor.

• javascript
• html
• charts
• highcharts

Share Improve this question Follow asked Nov 2, 2015 at 10:27 yeeenyeeen 4,9551212 gold badges5353 silver badges7474 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I think that the simplest way is using itemStyle and set cursor as default.

legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0,
        itemStyle: {
            'cursor': 'default'
        }
    },

Example: - http://jsfiddle/fc8vmarp/1/

You can create a CSS class hover and define the behavior when this class is hovered

.hover:hover {
   cursor: default;
}

Once you created your graph, you can set .hover to the DOM element you want to change the cursor on.

You can use HTML in your data labels as it seems you cannot change the style of the legend with Highcharts options [edit : I'm wrong => itemStyle as Sebastian Bochan has mentioned in its answer].

Here is an example : jsfiddle

    series: [{
        name: '<span style="cursor:default;">Tokyo</span>',
        marker: {
            symbol: 'square'
        },
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
            y: 26.5,
            marker: {
                symbol: 'url(https://www.highcharts./samples/graphics/sun.png)'
            }
        }, 23.3, 18.3, 13.9, 9.6]

    }, {
        name: '<span style="cursor:default;">London</span>',
        marker: {
            symbol: 'diamond'
        },
        data: [{
            y: 3.9,
            marker: {
                symbol: 'url(https://www.highcharts./samples/graphics/snow.png)'
            }
        }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]