This example demonstrates an interactive cross-hair.
- The crosshair itself is rendered via the crosshair annotation. Notice that the annotation itself is just a 'renderer', i.e. it does not handle mouse / touch events.
- The pointer component is used to add appropriate event handlers to the plot-area. The pointer component takes the mouse events and converts them into an array, which is the format required by the crosshair.
- The crosshair location is rendered to a
div
element that is added to the plot-area by decorating the cartesian chart. By adding the element via the enter selection, we ensure that it is added just once.