SciChart.js

v^2.0.2204

JavaScript Chart Examples

SciChart.js ships with ~60 JavaScript Chart Examples which you can browse, play with, view the source code and see related documentation. All of this is possible with the SciChart.js Examples Suite, which ships as part of the SciChart.js SDK

Download the SDK

Coloring Series per-point using the PaletteProvider

Demonstrates how create JavaScript Charts with per-point coloring using SciChart.js, High Performance JavaScript Charts

Demonstrates how to use the PaletteProvider API to color lines, points and fills individually based on a rule. Using this API you can color individual data-points of the following chart series: Line, Column, Candlestick, Ohlc, Mountain, Scatter, Bubble and Band.

Tips!

The PaletteProvider API is useful for showing thresholds or areas of interest!

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

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

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.