SciChart.js

v^2.2.2397

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.

JavaScript Fan Chart

Here we demonstrate how to create a JavaScript Fan Chart using SciChart.js. Zoom in and out to see the detail you can go to using our JavaScript Charts

Fan charts can be used for visualizing, forecasting or estimation figures and can be achieved in SciChart.js using several Band Series overlaid with varying opacity.

Tips!

As well as stroke, you can set strokeThickness, isVisible properties to change how the series is rendered.

Documentation Links

Featured Apps

Performance Demos

Load 500 Series x 500 Points Performance Demo Load 1 Million Points Performance Demo Realtime JavaScript Chart Performance Demo Realtime Ghosted Traces

Scientific Charts

Audio Analyzer Demo LiDAR 3D Point Cloud of Geospatial Data Tenor Curves Demo

Medical Charts

JavaScript Vital Signs ECG/EKG Medical Demo

2D Charts

Chart Annotations

JavaScript Chart Annotations JavaScript Chart Editable Annotations Trading Buy Sell Marker Annotations JavaScript Chart Drag Horizontal Threshold

Create Stock Charts

JavaScript Multi-Pane Stock Charts JavaScript Realtime Ticking Stock Charts

Chart Legends

Chart Legends API

Chart Axis APIs

Multiple X Axes Secondary Y Axes Vertical Charts Central Axes Vertically Stacked Axes Logarithmic Axis Example Draw Behind Axis

Axis Label Customization

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

Styling and Theming

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

Tooltips and Hit-Test

Hit-Test API Using Rollover Modifier Tooltips Using CursorModifier Crosshairs Using Series Selection Data Point Selection PointMetadata API

Zoom and Pan a Chart

Drag Axis to Scale or Pan Zoom and Pan a Realtime JavaScript Chart Zoom and Pan with multiple Chart Modifiers Zoom and Pan with Overview Chart

Transforming Data with Filters

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

Animation API

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

3D Charts

JavaScript 3D Chart Types

JavaScript 3D Bubble Chart JavaScript Surface Mesh 3D Chart

Quick Links

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

Useful Links

Download FREE Trials Installing and Uninstalling SciChart WPF 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.