Get it FREE Docs Code Sandbox

SciChart.js

v^3.2.532

SciChart.js Demo

JavaScript Candlestick Chart 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 Candlestick Chart

This demo shows you how to create a JavaScript Candlestick Chart or Stock Chart using SciChart.js. Data is fetched from Binance and placed on the chart. Two moving averages are added. Zooming, panning and tooltips as well. Switch between Candlestick or Ohlc, or see the Realtime Ticking Stock Charts demo which shows how to add live updates.

2D Charts

Chart Annotations

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

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 Types 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 Coloring Series per-point using the PaletteProvider JavaScript Point-Markers Chart Dashed Line Styling Data Labels Chart Title

Tooltips and Hit-Test

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

Zoom and Pan a Chart

Multiple X Axes Secondary Y Axes Zoom and Pan a Realtime JavaScript Chart Zoom and Pan with multiple Chart Modifiers Zoom and Pan with Overview Chart Virtualized JS 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 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 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 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.