SciChart.js
v^3.4.662SciChart.js Demo
JavaScript Chart with Multi-Style Series 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 with Multi-Style Series
Demonstrates how to use multiple styles on a single series on JavaScript Charts using SciChart.js, High Performance JavaScript Charts. This uses a RenderDataTransform to split the data so that we can draw the selected points using additional customised drawingProviders. This means that modifiers still see a single series with the original data.
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 with lines split by thresholdsJavaScript 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.