Flot: grab nearest point to crosshair

Question

I've been customizing my graphics and I've been trying to get the nearest point to the crosshair. The closest I got was by adding the mouseActiveRadius option, however this does not apply my desired effect. This is what happens:

As can be seen, the wrong point is being highlighted.

My plot code:

    $.plot("#players_chart",
        [{
            label: "Total number of players",
            data: data.data_labels
        }],
        {
            series: {
                lines: {
                    show: true
                }
            },
            xaxis: {
                mode: "time",
                minTickSize: [1, "day"],
                timeformat: "%a"
            },
            yaxis: {
                tickDecimals: 0
            },
            crosshair: {
                mode: "x"
            },
            grid: {
                hoverable: true,
                autoHighlight: true,
                mouseActiveRadius : 1000
            }
        }
    );

Is there any way to add some kind of horizontal radius to the crosshair instead of grid?

Thank you in advance.

Answer 1

The default point highlighting is separated from the crosshair plugin and works only by distance from the cursor. If you want to only work with horizontal distance you can do the highlighting manually.

Set autoHighlight: false and bind a plothover event where you search the nearest point on the x axis and then highlight that point.

Similar code is in the example for the crosshair plugin .