Question

Is it possible to highlight a line chart with flot? I only see highlighting of the datapoints but not the lines between the points.

I use the code from the following example.

$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    }
});

Answer 1

Looking at the source for flot 0.7, there is not included functionality to highlight lines.

However, if you wanted to extend flot to do what you want…

Flot has an “overlay” canvas which it uses to do effects like highlighting. This has the associated context octx in the source. If you look at the method drawPointHighlight(series, point) you can see how highlighting is done for datapoints. You could write a similar method for lines.

The drawOverlay() function iterates over an array of highlightable objects — you would want to extend that to handle “line” objects as well.

Finally you would need to write a method to add/remove lines from the array of highlightable objects, analogous to the existing highlight() and unhighlight() methods.
Notice these methods are made public using the lines:

plot.highlight = highlight;
plot.unhighlight = unhighlight;