javascripteventsdom-eventsnvd3.js

NVD3.js highlight graph points at mouseover event


How do I highlight points on a linechart when moving my mouse over another graph.

I need information from one chart when moving my mouse over it to send the selected data to another chart to highlight the points in the other chart.

e.g. chart 1 has a mouseover at x:3 y:5. It fires an event to highlight another charts line. Then at chart 2 you highlight the x:3 y:5 value.


Solution

  • I figured it out. You need to add a event dispatch to the original chart on the 'elementMousemove' event. In that event you need to highlight the values necessary on the other chart.

    chart.interactiveLayer.dispatch.on('elementMousemove.name', function(e) {
          chart2.lines.clearHighlights();
          chart2.lines.highlightPoint(0,parseInt(xIndex),true); 
    });
    chart.interactiveLayer.dispatch.on('elementMouseout.name', function(e) {
                chart2.lines.clearHighlights();
    });
    

    The code with on any mosemove event in chart will clear the previous highlights and highlight the the point at line = '0' and at specified XIndex in chart2.