Framework

Get it FREE Docs Code Sandbox

SciChart.js

v^3.4.659

SciChart.js Demo

Chart from JSON 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

Chart from JSON

Demonstrates how to use the Builder Api to create a Chart from JSON using SciChart.js. Adjust the JSON in the window below and the chart will re-build. Choose from pre-selected defaults to learn more about the Builder API.

{
    "surface": { "theme": { "type": "Navy" }},
    "series": { "type": "SplineLineSeries",
        "options": { "stroke": "red" },
        "xyData": { "xValues": [1,3,4,7,9], "yValues": [10,6,7,2,16] }
    },
    "yAxes": { "type": "NumericAxis", "options": { "visibleRange": {"min": 0, "max": 20} } },
    "annotations": [{
        "type": "SVGTextAnnotation", "options": { "text": "Builder API Demo", "x1": 0.5, "y1": 0.5, "opacity": 0.33,
              "yCoordShift": -26, "xCoordinateMode": "Relative", "yCoordinateMode": "Relative",
              "horizontalAnchorPoint": "Center", "verticalAnchorPoint": "Center",
              "fontSize": 42, "fontWeight": "Bold"
            }
        },
        {
            "type": "SVGTextAnnotation", "options": { "text": "Create SciChart charts from JSON", "x1": 0.5, "y1": 0.5, "opacity": 0.33,
                "yCoordShift": 26, "xCoordinateMode": "Relative", "yCoordinateMode": "Relative",
                "horizontalAnchorPoint": "Center", "verticalAnchorPoint": "Center",
                "fontSize": 36, "fontWeight": "Bold"
            }
        }]
}

Featured Apps

Performance Demos & Showcases

Realtime React Chart Performance Demo Load 500 Series x 500 Points Performance Demo Load 1 Million Points Performance Demo Realtime Ghosted Traces Realtime Audio Analyzer Demo Oil & Gas Explorer React Dashboard Client/Server Websocket Data Streaming Server Traffic Dashboard Rich Interactions Showcase Dynamic Layout Showcase Dragabble Event Markers React Population Pyramid

Scientific & Medical Charts

React Vital Signs ECG/EKG Medical Demo React Chart with Logarithmic Axis Example LiDAR 3D Point Cloud of Geospatial Data React Chart with Vertically Stacked Axes Realtime Audio Analyzer Demo Interactive Waterfall Spectral Chart

Financial Charts

React Candlestick Chart React OHLC Chart React Realtime Ticking Stock Charts React Multi-Pane Stock Charts using Subcharts Tenor Curves Demo React Multi-Pane Stock Charts using Sync Multi-Chart React Market Depth Chart React Chart Hoverable Buy Sell Marker Annotations React User Annotated Stock Chart

2D Charts

Chart Annotations

React Chart Annotations Coloring Series per-point using the PaletteProvider React Chart Hoverable Buy Sell Marker Annotations React Chart Drag Horizontal Threshold React Chart Editable Annotations React Quadrant Chart using Background Annotations React Chart Annotation Layers

Chart Legends

Chart Legends API

Chart Axis APIs

React Chart with Multiple X Axes React Chart with Secondary Y Axes React Vertical Charts React Chart with Central Axes React Chart with Static X Axis React Chart with Vertically Stacked Axes React Chart with Logarithmic Axis Example Draw React Chart Behind Axis Axis Types React 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 React Chart in Code Using Theme Manager in React Chart Create a Custom Theme for React Chart Coloring Series per-point using the PaletteProvider React Point-Markers Chart Dashed Line Styling Data Labels React Chart with Multi-Style Series React Chart Title

Tooltips and Hit-Test

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

Zoom and Pan a Chart

React Chart with Multiple X Axes React Chart with Secondary Y Axes Drag React Chart Axis to Scale or Pan Zoom and Pan a Realtime React Chart Zoom and Pan with React Chart multiple Modifiers Zoom and Pan with Overview Chart Virtualized React 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

React Chart Data Animation React Style Animation React Startup Animation React Generic Animation

Builder (JSON / JS Objects) API

Simple Chart using Builder API Full Chart using Builder API Chart from JSON React Chart with Reusable Templates using Shared Data Custom Types with Builder API

Subcharts API

React 64-Chart Dashboard Performance Demo Dynamic Layout Showcase

Multiple Charts

Synchronise Multiple Charts React Multi-Pane Stock Charts using Sync Multi-Chart Server Traffic Dashboard

3D Charts

JavaScript 3D Chart Types

React 3D Bubble Chart React Surface Mesh 3D Chart React Point Line 3D Chart LiDAR 3D Point Cloud of Geospatial Data Tenor Curves Demo React 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.