Framework

Get it FREE Docs Code Sandbox

SciChart.js

v^3.3.586

SciChart.js Demo

JavaScript Chart Annotation Layers is part of the SciChart.js demo app. To clone the repo for this demo, visit SciChart's Github. For getting-started & docs, see above! Open in CodeSandBox

JavaScript Chart Annotation Layers

Demonstrates how Annotation layering a JavaScript Chart using SciChart.js, High Performance JavaScript Charts
Notice the difference between annotations rendered to SVG and Canvas, as well as annotationLayer property effect.

Featured Apps

Performance Demos & Showcases

Realtime JavaScript Chart Performance Demo Load 500 Series x 500 Points Performance Demo Load 1 Million Points Performance Demo Realtime Ghosted Traces Realtime Audio Analyzer Demo Oil & Gas Explorer JavaScript Dashboard Client/Server Websocket Data Streaming Server Traffic Dashboard Rich Interactions Showcase Dynamic Layout Showcase Dragabble Event Markers

Scientific & Medical Charts

JavaScript Vital Signs ECG/EKG Medical Demo JavaScript Chart with Logarithmic Axis Example LiDAR 3D Point Cloud of Geospatial Data JavaScript Chart with Vertically Stacked Axes Realtime Audio Analyzer Demo Interactive Waterfall Spectral Chart

Financial Charts

JavaScript Candlestick Chart JavaScript OHLC Chart JavaScript Realtime Ticking Stock Charts JavaScript Multi-Pane Stock Charts using Subcharts Tenor Curves Demo JavaScript Multi-Pane Stock Charts using Sync Multi-Chart JavaScript Market Depth Chart

2D Charts

Chart Annotations

JavaScript Chart Annotations Coloring Series per-point using the PaletteProvider JavaScript Chart Trading Buy Sell Marker Annotations JavaScript Chart Drag Horizontal Threshold JavaScript Chart Editable Annotations JavaScript Quadrant Chart using Background Annotations JavaScript Chart Annotation Layers

Chart Legends

Chart Legends API

Chart Axis APIs

JavaScript Chart with Multiple X Axes JavaScript Chart with Secondary Y Axes JavaScript Vertical Charts JavaScript Chart with Central Axes JavaScript Chart with Vertically Stacked Axes JavaScript Chart with Logarithmic Axis Example Draw JavaScript Chart Behind Axis Axis Types JavaScript Chart Axis Layout Options

Axis Label Customization

Multi-line and Rotated Text labels Image labels Rotated Labels and Alignment

Styling and Theming

Background Image with Transparency Styling a JavaScript Chart in Code Using Theme Manager in JavaScript Chart Create a Custom Theme for JavaScript Chart Coloring Series per-point using the PaletteProvider JavaScript Point-Markers Chart Dashed Line Styling Data Labels JavaScript Chart Title

Tooltips and Hit-Test

JavaScript Chart Hit-Test API Using Rollover Modifier Tooltips Using CursorModifier Crosshairs Using VerticalSliceModifier Datapoint Metadata Tooltips on JavaScript Chart Using Series Selection JavaScript Chart Data Point Selection

Zoom and Pan a Chart

JavaScript Chart with Multiple X Axes JavaScript Chart with Secondary Y Axes Drag JavaScript Chart Axis to Scale or Pan Zoom and Pan a Realtime JavaScript Chart Zoom and Pan with JavaScript Chart multiple Modifiers Zoom and Pan with Overview Chart Virtualized JavaScript Charts: Load Data on Zoom/Pan

Transforming Data with Filters

Trendline, Moving Average and Ratio Filters Custom Filters Realtime Percentage Change using Filter

Animation API

JavaScript Chart Data Animation JavaScript Style Animation JavaScript Startup Animation JavaScript Generic Animation

Builder (JSON / JS Objects) API

Simple Chart using Builder API Full Chart using Builder API Chart from JSON JavaScript Chart with Reusable Templates using Shared Data Custom Types with Builder API

Subcharts API

JavaScript 64-Chart Dashboard Performance Demo Dynamic Layout Showcase

Multiple Charts

Synchronise Multiple Charts JavaScript Multi-Pane Stock Charts using Sync Multi-Chart Server Traffic Dashboard

3D Charts

JavaScript 3D Chart Types

JavaScript 3D Bubble Chart JavaScript Surface Mesh 3D Chart JavaScript Point Line 3D Chart LiDAR 3D Point Cloud of Geospatial Data Tenor Curves Demo JavaScript Realtime Surface Mesh 3D Chart

Quick Links

Home WPF Charts WPF 3D Charts iOS & macOS Charts Android Charts JavaScript Charts Pricing News & Releases NEW! SciChart Blog About Us EULA Sitemap

Useful Links

Download FREE Trials Testimonials & Reviews Community & Support WPF Chart Examples iOS & macOS Chart Examples Android Chart Examples JavaScript Chart Examples

Contact us

Not sure where to start? Contact us, we are happy to help!

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.