折线图组合多个系列的工具提示

Question

I have a flot chart with multiple series. I need to show y-values of all the series together when any point is hovered on for a particular x-value.

I'm using flot.tooltip for showing the tooltip. Is there any way to combine the y-values of all series like PowerBI does? Or or maybe even trigger the hovers of other points too?

Answer 1

Here's what I included in my chartOptions:

tooltipOpts: {
    content: function (label, x, y) {
        // titile
        var text = "<i>" + vm.areaData[0].data[x][0] + '<br/></i>';
        vm.areaData.forEach(function(series)
        {
            // series_label : value
            text += "<b>" + series.label + ' : ' + series.data[x][1] + "<br/>" + "</b>";
        });
        return text;
    }
}

As the X-axis has common values, I'm using that as title for the tooltip. vm.areaData has the different series that are on my chart. I'm iterating through them and creating the tooltip that needs to be displayed.