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.
drawExample.ts
index.tsx
1import { SciChartSurface, chartBuilder, TWebAssemblyChart } from "scichart";
2
3export const drawExample = async (
4 divElementId: string | HTMLDivElement,
5 json: string,
6 setErrors: (error: any) => void
7) => {
8 try {
9 // Build the SciChartSurface from Json passed in
10 const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart(divElementId, json);
11
12 return { sciChartSurface, wasmContext };
13 } catch (error) {
14 const msg = (error as any).message;
15 setErrors(msg);
16 return { sciChartSurface: undefined, wasmContext: undefined };
17 }
18};
19
20export const defaultJsonDefinition = `{
21 "surface": { "theme": { "type": "Navy" }},
22 "series": { "type": "SplineLineSeries",
23 "options": { "stroke": "red" },
24 "xyData": { "xValues": [1,3,4,7,9], "yValues": [10,6,7,2,16] }
25 },
26 "yAxes": { "type": "NumericAxis", "options": { "visibleRange": {"min": 0, "max": 20} } },
27 "annotations": [{
28 "type": "SVGTextAnnotation", "options": { "text": "Builder API Demo", "x1": 0.5, "y1": 0.5, "opacity": 0.33,
29 "yCoordShift": -26, "xCoordinateMode": "Relative", "yCoordinateMode": "Relative",
30 "horizontalAnchorPoint": "Center", "verticalAnchorPoint": "Center",
31 "fontSize": 36, "fontWeight": "Bold"
32 }
33 },
34 {
35 "type": "SVGTextAnnotation", "options": { "text": "Create SciChart charts from JSON", "x1": 0.5, "y1": 0.5, "opacity": 0.33,
36 "yCoordShift": 26, "xCoordinateMode": "Relative", "yCoordinateMode": "Relative",
37 "horizontalAnchorPoint": "Center", "verticalAnchorPoint": "Center",
38 "fontSize": 24, "fontWeight": "Bold"
39 }
40 }]
41}`;
42
43export const detailedJsonDefinition = `{
44 "surface": {
45 "theme": {
46 "type": "Navy",
47 "axisTitleColor": "#1d4e8f"
48 }
49 },
50 "xAxes": [{
51 "type": "CategoryAxis",
52 "options": {
53 "axisTitle": "X Axis Title",
54 "labelProvider": {
55 "type": "Text",
56 "options": {
57 "labels": { "1": "one", "2": "two", "3": "three", "4": "four", "5": "five" }
58 }
59 }
60 }
61 }
62 ],
63 "yAxes": [{
64 "type": "NumericAxis",
65 "options": {
66 "axisAlignment": "Left",
67 "axisTitle": "Left Axis",
68 "id": "y1",
69 "visibleRange": { "min": 0, "max": 20 },
70 "zoomExtentsToInitialRange": true
71 }
72 }, {
73 "type": "NumericAxis",
74 "options": {
75 "axisAlignment": "Right",
76 "axisTitle": "Right Axis",
77 "id": "y2",
78 "visibleRange": { "min": 0, "max": 800 },
79 "zoomExtentsToInitialRange": true
80 }
81 }
82 ],
83 "series": [{
84 "type": "SplineMountainSeries",
85 "options": {
86 "yAxisId": "y1",
87 "stroke": "#1d4e8f",
88 "fillLinearGradient": {
89 "gradientStops": [{
90 "color": "rgba(161, 233, 255, 1)",
91 "offset": 0.5
92 }, {
93 "color": "rgba(0, 55, 117, 0.3)",
94 "offset": 1
95 }
96 ],
97 "startPoint": { "x": 0, "y": 0 },
98 "endPoint": {"x": 0, "y": 1 }
99 }
100 },
101 "xyData": {
102 "xValues": [1, 2, 3, 4, 5],
103 "yValues": [8, 6, 7, 2, 16]
104 }
105 }, {
106 "type": "BubbleSeries",
107 "options": {
108 "pointMarker": {
109 "type": "Ellipse",
110 "options": {
111 "fill": "#FFA24399",
112 "strokeThickness": 0,
113 "height": 100,
114 "width": 100
115 }
116 },
117 "yAxisId": "y2"
118 },
119 "xyzData": {
120 "xValues": [1, 2, 3, 4, 5],
121 "yValues": [180, 350, 490, 720, 530],
122 "zValues": [20, 40, 20, 30, 35]
123 }
124 }
125 ],
126 "modifiers": [
127 { "type": "Rollover", "options": { "yAxisId": "y1" } },
128 { "type": "MouseWheelZoom" },
129 { "type": "ZoomExtents" }
130 ],
131 "annotations": [{
132 "type": "SVGTextAnnotation",
133 "options": {
134 "y1": 10,
135 "text": "Annotation"
136 }
137 }
138 ]
139 }`;
140
141const spiralX = [];
142const spiralY = [];
143for (let i = 0; i < 20; i += 0.2) {
144 spiralX.push(Math.sin(i) + Math.cos(i / 20));
145 spiralY.push(Math.cos(i) - Math.sin(i / 20));
146}
147export const centralLayoutJsonDefinition = `{
148 "surface": { "layoutManager": { "type": "CentralAxes" }, "theme": { "type": "Navy" }},
149 "series": {
150 "type": "ScatterSeries",
151 "options": { "pointMarker": { "type": "Ellipse", "options": { "fill": "white" } } },
152 "xyData": { "dataIsSortedInX": false, "xValues": [${spiralX}], "yValues": [${spiralY}] }
153 },
154 "yAxes": {
155 "type": "NumericAxis",
156 "options": { "labelPrecision": 1, "axisBorder": { "borderRight": 1, "color": "white" } }
157 },
158 "xAxes": {
159 "type": "NumericAxis",
160 "options": { "labelPrecision": 1, "axisBorder": { "borderTop": 1, "color": "white" } }
161 },
162 "modifiers": [
163 { "type": "MouseWheelZoom" },
164 { "type": "ZoomExtents" },
165 { "type": "Cursor" },
166 { "type": "ZoomPan" }
167 ]
168 }`;
169Chart From JSON - React
Overview
This example demonstrates how to integrate SciChart.js within a React application to dynamically generate 2D charts from JSON configurations. It allows users to update the chart in real time by modifying the JSON data, offering a highly interactive and customizable charting experience.
Technical Implementation
The chart is created using the SciChart.js Builder API by parsing JSON definitions via the asynchronous function that calls chartBuilder.build2DChart. This function initializes the chart and handles errors using async/await methods. The integration is encapsulated in the SciChartReact component, which facilitates seamless embedding of WebAssembly-powered charts in React. Additionally, the implementation leverages React memoization techniques such as useMemo and React.memo to optimize rendering performance, as discussed in performance optimization techniques.
Features and Capabilities
The example supports real-time chart updates by allowing users to switch between various chart configurations including simple spline line charts, detailed dual-axis charts, and scatter charts with a central axis layout. Advanced features such as gradient fills, custom annotations, and dual y-axis configurations are all defined through JSON, demonstrating the flexibility of the Builder API. For further details on the capabilities of the JSON configuration approach, developers can refer to the Builder API documentation.
Integration and Best Practices
The React integration showcased here aligns with modern best practices by using Material-UI components such as ButtonGroup and TextField for building a user-friendly interface. This not only ensures a consistent UI design but also supports dynamic updates to the chart configuration, as highlighted in the Tutorial on setting up a project with scichart-react. Comprehensive error handling and the use of memoization help maintain high performance and responsiveness in the application. Additionally, the implementation of a central layout using custom JSON further demonstrates the robustness and flexibility provided by SciChart.js, details of which can be found in the Central Axis Layout documentation.
react Chart Examples & Demos
See Also: Builder (JSON / JS Objects) API (4 Demos)
Simple Chart using Builder API
Demonstrates how to use the Builder Api to create a simple chart using a definition object. The builder api is designed to make it easier to discover the types and options available in SciChart JS.
Full Chart using Builder API
Demonstrates how to use the Builder Api to configure axes, series, annotations and modifiers using a definition object. The builder api is designed to make it easier to discover the types and options available in SciChart JS.
React Chart with Reusable Templates using Shared Data
Demonstrates how to use the Builder Api to create Reusable Chart Templates.Data can be easily integrated into a definition and shared between series
Custom Types with Builder API
Demonstrates how to make a custom type such as a PaletteProvider available for use with the Builder Api.You can call methods within the builder api to get references to the objects being built, so you can update them later.