Flot chart combined tooltip of multiple series

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?

score 1 · Answer 1 · answered May 26 '16 at 06:11

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.

Flot chart combined tooltip of multiple series

1 Answers1