JavaScript Time Series Annotations Chart

line xy figure annotation

Example of displaying annotations in a time series line chart.
In this example context, each annotation has a start time, end time, background color and text to display.
They are displayed using a combination of RectangleSeries, TextSeries and SegmentSeries (for line segments).

These series types are optimized for rendering large numbers of objects, so applications can even have thousands of this kinds of annotations loaded in simultaneously.

This example showcases:

  • Automatic logic for hiding labels and background rectangles when they would extend past the annotations start / end time.
  • Custom interactions to:
    • Create annotations by dragging mouse (LMB) over series area
    • Delete annotation by double clicking on its text
    • Drag on annotations whiskers to change start / end time

Naturally, this is just an example of one possible way of displaying annotations in a chart. The main goal here is to give a reference how the FigureSeries can be used along with custom user interactions.