Pre loader

JavaScript Chart Annotations

JavaScript Chart - Examples

SciChart.js ships with over 80 JavaScript Chart demos which you can browse, view the source code and see related documentation. Build incredible complex dashboards with SciChart.js, our High Performance JavaScript Chart Library.

Getting Started

Demonstrates how to add Annotations (shapes, boxes, lines, text) to a JavaScript Chart using SciChart.js, High Performance JavaScript Charts

An introduction to the Annotations API in SciChart.js, which allows SVG elements or custom WebGL rendered elements to be placed over the chart at specific X,Y data-values.

Several annotations are available out of the box, such as LineAnnotation, BoxAnnotation, TextAnnotation, and we provide a CustomAnnotation and SVGAnnotation which allows for custom shapes to be placed over the chart.

Tips
The AnnotationBase type has properties for x,yCoordinateMode which allow you to place annotations are relative or absolute values. Great for docking annotations to the top,left,right,bottom of a chart, or creating watermark

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies