Search code examples
angularjschartshighchartsparallel-coordinates

Not able to hover on each line in Highcharts's Parallel Coordinate chart


I have implemented Parallel coordinate chart with Highcharts link but not able to hover on each and every line. Instead, it hover on other point.


Solution

  • This problem is already reported on Highcharts GitHub: https://github.com/highcharts/highcharts/issues/9054

    To workaround, you can disable Highcharts tooltip and enableMouseTracking option and add your own event to the lines:

        var lines = $('.highcharts-series path');
    
        lines.on('mouseover', function(e) {
            var series,
                result = '',
                i;
    
            for (i = 0; i < chart.series.length; i++) {
                if (chart.series[i].graph.d === this.getAttribute("d")) {
                    series = chart.series[i];
                    i = chart.series.length;
                }
            }
    
            Highcharts.each(series.points, function(p) {
                result += p.category + ' ' + p.y + '<br>'
            });
    
            $("#tooltip").html(result);
        });
    

    Live demo: https://jsfiddle.net/BlackLabel/so52apLn/