Uploaded November 2020 | Updated September 2026, 2 weeks ago

---

The 6th tutorial in our SciChart.js series on high-performance, real-time JavaScript charts: scichart.com/javascript-chart-features

In this tutorial, you’ll learn how to use the SciChart.js Annotations API to enhance your charts with:
✅ Line Annotation
✅ Text Annotation
✅ Box/Rectangle Annotation
✅ Custom Annotations (supporting custom SVG shapes and markers)

Video Breakdown:

0:38 — Boilerplate (empty) example
1:11 — Line Annotation
2:05 — Changing Line Annotation properties
2:28 — x/yCoordinateMode Relative for docking annotations
3:48 — Box Annotation
4:36 — Stretched Box Annotation (left→right, top→bottom)
5:36 — Text Annotation & Horizontal/Vertical Anchor Points
6:44 — Creating text watermarks
7:17 — Custom Annotations with SVG shapes or markers
8:20 — Further examples: Buy/Sell markers and annotations

Resources:

SciChart.js Documentation: scichart.com/documentation/js/v4/intro

SciChart.js Features: scichart.com/javascript-chart-features

Connect with Andrew Burnett-Thompson (Founder & CEO): twitter.com/DrAndrewBt

SciChart.js is a high-performance JavaScript charting library designed for interactive, real-time charts in finance, science, engineering, and web dashboards.

#SciChartJS #JavaScriptCharts #AnnotationsJS #LineAnnotation #TextAnnotation #BoxAnnotation #CustomAnnotationsJS #InteractiveChartsJS