CanvasJs hide certain lines in chart whe mouse is over legend point

Question

I made multiple line chart with legend and now I interested if it is possible to make next: when mouse is over any point from legend then all lines in a chart that are not belong to this legend point become hidden or just invisible?

I will be grateful if You could write some example.

Answer 1

You can hide / unhide any dataSeries by setting its visible property to false / true on mouseover & mouseout of legend items. Here is a jsfiddle

function onMouseOver(e) {
    for(var i = 0; i < e.chart.options.data.length; i++) {
        if (e.dataSeries !== e.chart.options.data[i]) {
            e.chart.options.data[i].visible = false;
        } else {
            e.dataSeries.visible = true;
        }
    }
    e.chart.render();
}

function onMouseOut(e) {
    for( var i = 0; i < e.chart.options.data.length; i++){
        e.chart.options.data[i].visible = true;
        chart.render();
    }
}