Different tooltips for series in FlotChart

Question

I have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.

Does anyone know a solution?

$(function () {
var barOptions = {
    xaxis: {
        tickDecimals: 0
    },
    yaxes: [{
        position: "left"
    }, {
        position: "right"
    }],
    colors: ["#36c6d3"],
    grid: {
        color: "#888888"
    },
    tooltip: {
        show: true,
        content: "Uge %x, %s: %y"
    }
};
var dataset = [{
    data: occData.data,
    label: occData.label,
    yaxis: occData.yaxis,
    lines: {
        show: true,
        lineWidth: 1,
    }
}, {
    data: houseData.data,
    label: houseData.label,
    yaxis: houseData.yaxis,
    color: 'grey',
    lines: {
        show: true,
        lineWidth: 1,
        fill: false
    }
}];
$("#flot-line-chart-past").plot(dataset, barOptions);

});

score 2 · Answer 1 · answered Dec 28 '16 at 00:52

I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:

you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.

So write a function that distinguishes between each label you use for the two series, and return a different format string for each.

Different tooltips for series in FlotChart

1 Answers1