How to manage event through a fill color with highchart?

Question

I've got two series in an Highchart graph. Both are handling event like mousemove (to show tooltip) and mouse click.

Unfortunatly one of those series is an area serie which block any event to be triggered by the other one.

Let's say I've got those series with those plot options :

plotOptions: {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                    alert ('Category: '+ this.category +', value: '+ this.y);
                }
            }
        }
    }
},

series: [{
    color:'red',
    data: [29.9, 51.5, 16.4, 19.2, 44.0, 16.0, 35.6, 48.5, 26.4, 4.1, 9.6, 54.4]        
},
{
    type:'area',
    data: [39.9, 75.5, 120.4, 150.2, 130.0, 120.0, 140.6, 158.5, 216.4, 194.1, 95.6, 54.4]}
]
}

as seen in this JSFiddle

I can never click or see the tooltip on the red series points.

What I could do is to change the order of the series so the red one is over the blue one. ( like this). But I've got situations where I've got several area graphs over each other like that. In this case, change the order won't help. Is there a way I can handle events through the fill area?

score 1 · Accepted Answer · edited May 23 '17 at 11:50

Ok I found a way that suit my need : manimulating SVG element order as indicated in this topic : SVG re-ordering z-index (Raphael optional)

I'm using this code in the redraw event of the chart :

redraw : function(){
    //get a reference on the first series svg element.
    var svgSeriesParent = document.querySelectorAll('.highcharts-series')[0];

    //loop on all the path drawn by highchart
    var pathArray = document.querySelectorAll('path');

    for (var pathIndex = 0; pathIndex < pathArray.length; pathIndex++) {
        var pathObj = pathArray[pathIndex];
        //if attribute fill is not "none", this is an area path.
        if ($(pathObj).attr('fill') !== "none") {

            //move the current fill path before the first series svg element.
            svgSeriesParent.insertBefore(pathObj, svgSeriesParent.firstChild);
        }
    }
}

See the result in this JSFiddle

Limitation : The fill area doesn't have the same svg group anymore thus, hidding / showing the series is broken : all the fill area are considered being part of the first series. (click in the legend to see it).

In my case I don't need to hide series so I'll go on with this solution.

The svg order manipulation is not complicated that's why I would expect highchart to manage this case : add a fillZIndex parametter doesn't seem difficult and could be pretty usefull...

score 0 · Answer 2 · answered Jun 19 '13 at 11:30

0

Only what comes to my mind is using 4 series, 2 area and 2 lines and use index.

http://jsfiddle.net/j8qYK/3/

answered Jun 19 '13 at 11:30

Sebastian Bochan

37,348
3
49
75

Well ok, now let's say I've got 20 graphs with 4000 points each... and need to be running on mobile devices. Do I really want to add one more data series for each area graph I've got ? More over I've already done that in some other case : http://stackoverflow.com/questions/16855265/how-to-fill-the-area-between-two-series-with-multiples-yaxis-in-highchart. Pretty heavy no ? – Guian Jun 19 '13 at 12:29

How to manage event through a fill color with highchart?

2 Answers2