Framework

SciChart.js

v^3.4.659

SciChart.js Demo

JavaScript Chart Drag Horizontal Threshold 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 Drag Horizontal Threshold

Demonstrates interaction by dragging vertical and horizontal line thresholds. As the thresholds move, the chart colour updates.

Featured Apps

2D Charts

JavaScript Chart Types

Chart Annotations

JavaScript Chart Annotations Coloring Series per-point using the PaletteProvider JavaScript Chart Hoverable 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 Static X Axis 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 with Multi-Style Series 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

Frameworks

SciChart Javascript Demos SciChart React Demos

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.