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;            
        }
    }
});

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;            
        }
    }
});

• javascript
• jquery
• charts
• flot

• I'm looking for the same thing... You could use plothover and figure out for yourself if mouse is on a line, but I would like an easier way. – Lasse Skindstad Ebert Commented Jul 17, 2012 at 7:12

3 Answers 3

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;

The easiest thing to do is to just use the 'plothover' event to re-render the chart. Flot renders extremely fast, so there shouldn't be any flicker. I'm doing this in a project currently, and it works great.

You can find documentation on the 'plothover' and 'plotclick' events here: https://github./flot/flot/blob/master/API.md#customizing-the-grid

An undocumented feature of flot is that you can add arbitrary keys to each series object, and those keys will be available in the 'plothover' and 'plotclick' event handlers. In my example I made an arbitrary key named 'key', you could use 'label', if you're using labels.

Here's an example:

$(function() {

  var d1 = [];
  for (var i = 0; i < 14; i += 0.5) {
    d1.push([i, Math.sin(i)]);
  }
  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  var d3 = [[0, 12], [7, 12], [7, 2.5], [12, 2.5]];

 var data = [
   {key: 'd1', data: d1},
   {key: 'd2', data: d2},
   {key: 'd3', data: d3}
   ];

  function plotChart(lineKey) {
      $.each(data, function(index, line){
        line.lines = {
          lineWidth: (lineKey === line.key) ? 3 : 0.5
        }
        $.plot("#placeholder", data, {grid : {hoverable: true}});
    });
  }

  var previousPoint = null;
  $('#placeholder').on('plothover', function(e, position, item){
    if (item) {
      if (previousPoint == null || previousPoint[0] !== item.seriesIndex || previousPoint[1] !== item.dataIndex) {
        previousPoint = [item.seriesIndex, item.dataIndex];
        plotChart(item.series.key);
      }
    } else {
      plotChart();
      previousPoint = null;            
    }
  });

  plotChart();
});

note - this only works when hovering over an actual datapoint.

Instead of trying to highlight a particular line segment (or group of data points within a series), could you use two different series (each with an appropriate colour) to do what you want?

I do this with bar charts to be able to show an additional dimension on the chart's graph and it works reasonably well.

NOTE: I've mostly been using flot for Bar charts, so you if your series line drops down to the horizontal axis for a zero value, you might have to use a separate series each time you want the colour to change (or change back).