SciChart.js
v^3.4.659SciChart.js Demo
Virtualized JavaScript Charts: Load Data on Zoom/Pan 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
Virtualized JavaScript Charts: Load Data on Zoom/Pan
Whenever the visible range changes, the chart requests data from the server, which returns a reduced view of the dataset, in this case using a very simple `take every nth point` method. The overview is created manually because it does not share data with the main chart but has a reduced view of the entire dataset.
Featured Apps
Performance Demos & Showcases
Realtime JavaScript Chart Performance DemoLoad 500 Series x 500 Points Performance DemoLoad 1 Million Points Performance DemoRealtime Ghosted TracesRealtime Audio Analyzer DemoOil & Gas Explorer JavaScript DashboardClient/Server Websocket Data StreamingServer Traffic DashboardRich Interactions ShowcaseDynamic Layout ShowcaseDragabble Event MarkersJavaScript Population Pyramid
Scientific & Medical Charts
Financial Charts
JavaScript Candlestick ChartJavaScript OHLC ChartJavaScript Realtime Ticking Stock ChartsJavaScript Multi-Pane Stock Charts using SubchartsTenor Curves DemoJavaScript Multi-Pane Stock Charts using Sync Multi-ChartJavaScript Market Depth ChartJavaScript Chart Hoverable Buy Sell Marker AnnotationsJavaScript User Annotated Stock Chart
2D Charts
JavaScript Chart Types
JavaScript Line ChartJavaScript Spline Line ChartJavaScript Digital Line ChartJavaScript Band ChartJavaScript Spline Band ChartJavaScript Digital Band ChartJavaScript Bubble ChartJavaScript Candlestick ChartJavaScript Column ChartJavaScript Population PyramidJavaScript Error Bars ChartJavaScript Impulse ChartJavaScript Text ChartJavaScript Fan ChartJavaScript Heatmap ChartJavaScript Non Uniform Heatmap ChartJavaScript Heatmap Chart With ContoursJavaScript Mountain ChartJavaScript Spline Mountain ChartJavaScript Digital Mountain ChartJavaScript Realtime Mountain ChartJavaScript Scatter ChartJavaScript Stacked Column ChartJavaScript Stacked Column Side by SideJavaScript Stacked Mountain ChartJavaScript Smooth Stacked Mountain ChartJavaScript Pie ChartJavaScript Donut ChartJavaScript Quadrant Chart using Background Annotations
Chart Annotations
JavaScript Chart AnnotationsColoring Series per-point using the PaletteProviderJavaScript Chart Hoverable Buy Sell Marker AnnotationsJavaScript Chart Drag Horizontal ThresholdJavaScript Chart Editable AnnotationsJavaScript Quadrant Chart using Background AnnotationsJavaScript Chart Annotation Layers
Chart Legends
Chart Axis APIs
JavaScript Chart with Multiple X AxesJavaScript Chart with Secondary Y AxesJavaScript Vertical ChartsJavaScript Chart with Central AxesJavaScript Chart with Static X AxisJavaScript Chart with Vertically Stacked AxesJavaScript Chart with Logarithmic Axis ExampleDraw JavaScript Chart Behind AxisAxis TypesJavaScript Chart Axis Layout Options
Axis Label Customization
Styling and Theming
Background Image with TransparencyStyling a JavaScript Chart in CodeUsing Theme Manager in JavaScript ChartCreate a Custom Theme for JavaScript ChartColoring Series per-point using the PaletteProviderJavaScript Point-Markers ChartDashed Line StylingData LabelsJavaScript Chart with Multi-Style SeriesJavaScript Chart Title
Tooltips and Hit-Test
Zoom and Pan a Chart
Transforming Data with Filters
Animation API
Builder (JSON / JS Objects) API
3D Charts
Quick Links
Useful Links
SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.