Search code examples
javascriptjquerychartsjqplotjqplot-highlighter

jqplot show highlighter on only one chart


I have a jqplot chart with two data lines. Only one should have the highlighter enabled. I tried this:

series:[
    {
        highlighter: {
            formatString: "",
            show: false
        }
    },
    {
        highlighter: {
            formatString: "Day %s: %d",
            show: true
        }
    }
]

But unfortunately, this doesn't work: the highlighter shows a small empty dot at the first line, whereas it should show nothing.

How do I show the highlighter on one chart and not on the other?


Solution

  • This is a very interesting question (+1). The only solution that came to my mind, as playing with options of a plot didn't help, was to clean the canvas and hide highlighter's tooltip every time that it is suppose to show. This is done in the code below and presented in a working sample available here.

    $('#chart').bind('jqplotMouseMove', function(event, xy, axesData, neighbor, plot) {
        if (neighbor && neighbor.seriesIndex == 0) {
            var drawingCanvas = $(".jqplot-highlight-canvas")[0];
            var context = drawingCanvas.getContext('2d');
            context.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
            $('.jqplot-highlighter-tooltip').hide();
        }
    });