Get it FREE Docs Code Sandbox

SciChart.js

v^3.3.575

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 JavaScript 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 Dashboard Client/Server Websocket Data Streaming Server Traffic Dashboard Rich Interactions Showcase Dynamic Layout Showcase Dragabble Event Markers

Scientific & Medical Charts

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

Financial Charts

JavaScript Candlestick Chart JavaScript OHLC Chart JavaScript Realtime Ticking Stock Charts JavaScript Multi-Pane Stock Charts using Subcharts Tenor Curves Demo JavaScript Multi-Pane Stock Charts using Sync Multi-Chart JavaScript Market Depth Chart

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 Create a Custom Theme 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 Drag Axis to Scale or Pan 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 & 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.