HTML Overlays

Use the and controls or the buttons below to toggle closing and opening the notes.

Pan and zoom the chart to see how open notes respond to view changes.

You can create your own HTML overlay to add elements made from scratch to your chart.

With KeyLines events, you can integrate these elements into the chart and make them respond to chart changes, view changes and user interactions.

The view-change event lets you scale the open notes with the chart when the view changes. In this case, the note size is also capped as the chart is zoomed in to keep the chart balanced and clear.

The drag-move event keeps the note position relative to the node when dragging the node and panning the chart.

Key functions used: