CODEWITHSUNDEEP
javascriptapihighchartsinteraction
ozke
ozke

Reputation: 1620

Highcharts not tracking mouse activity under filled area

Is there any way to keep interaction on markers covered by other areas (when the do have a fill color)?

Check the example: http://jsfiddle.net/ozke/n4k57v5j/1/

$('#container').highcharts({
    chart: {
        type: 'area'
    },
    xAxis: {
        fill: '#F00',
        gridLineWidth: 1,
    },
    yAxis: {
        enabled: false,
        gridLineWidth: 0
    },
    series: [
        // Required JSON code?
        {
            data: [15,20,10,20,30]
        },{
            data: [10,15,20,15,20]
        },
    ]
});

The marker/dot in the blue area is impossible to reach/hover/interact when x=2.

In CSS, the equivalent would be using pointer-events:none; on the area (not the border or markers).

It's probably something to do with SVG and/or event propagation.

Upvotes: 2

Views: 217

Answers (1)

ozke
ozke

Reputation: 1620

After some research I found out there's something similar to pointer-events: none; for SVG (used by Highcharts). There's a few options excluse for SVG but in my case what I needed was pointer-events: visibleStroke;

The solution would then be:

path { pointer-events: visibleStroke; }

Upvotes: 2

Related Questions