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.
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
.