Full Chart using Builder API
Demonstrates how to use the Builder Api to create a Fully Configured Chart using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
theme.ts
1import {
2 SciChartSurface,
3 build2DChart,
4 registerAllTypes,
5 EAxisType,
6 ELabelProviderType,
7 EAxisAlignment,
8 NumberRange,
9 ESeriesType,
10 GradientParams,
11 EPointMarkerType,
12 EAnnotationType,
13 ECoordinateMode,
14 EHorizontalAnchorPoint,
15 EVerticalAnchorPoint,
16 EChart2DModifierType,
17 Point,
18} from "scichart";
19import { appTheme } from "../../theme";
20
21// The Builder API is lean by default in v6. This chart is defined with type-strings only,
22// so register the built-in types before building it
23registerAllTypes();
24
25export const drawExample = async (rootElement: string | HTMLDivElement) => {
26 // Create a chart using the Builder-API, an api that allows defining a chart
27 // with javascript-objects or JSON
28 return await build2DChart(rootElement, {
29 // Set theme
30 surface: { theme: appTheme.SciChartJsTheme },
31 // Add XAxis
32 xAxes: [
33 {
34 type: EAxisType.CategoryAxis,
35 options: {
36 axisTitle: "X Axis Title",
37 labelProvider: {
38 type: ELabelProviderType.Text,
39 options: {
40 labels: { 1: "one", 2: "two", 3: "three", 4: "four", 5: "five" },
41 },
42 },
43 },
44 },
45 ],
46 // Add multiple Y-Axis
47 yAxes: [
48 {
49 type: EAxisType.NumericAxis,
50 options: {
51 id: "y1",
52 axisTitle: "Left Axis",
53 axisAlignment: EAxisAlignment.Left,
54 visibleRange: new NumberRange(0, 20),
55 zoomExtentsToInitialRange: true,
56 },
57 },
58 {
59 type: EAxisType.NumericAxis,
60 options: {
61 id: "y2",
62 axisTitle: "Right Axis",
63 axisAlignment: EAxisAlignment.Right,
64 visibleRange: new NumberRange(0, 800),
65 labelPrecision: 0,
66 zoomExtentsToInitialRange: true,
67 },
68 },
69 ],
70 // Add series. More than one can be set in an array
71 series: [
72 {
73 // each series has type, options in the builder-API
74 type: ESeriesType.SplineMountainSeries,
75 options: {
76 yAxisId: "y1",
77 stroke: appTheme.VividSkyBlue,
78 strokeThickness: 5,
79 fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
80 { color: appTheme.VividTeal, offset: 0.2 },
81 { color: "Transparent", offset: 1 },
82 ]),
83 },
84 xyData: { xValues: [1, 2, 3, 4, 5], yValues: [8, 6, 7, 2, 16] },
85 },
86 {
87 type: ESeriesType.BubbleSeries,
88 options: {
89 yAxisId: "y2",
90 pointMarker: {
91 type: EPointMarkerType.Ellipse,
92 options: {
93 width: 100,
94 height: 100,
95 strokeThickness: 10,
96 fill: appTheme.PaleSkyBlue,
97 stroke: appTheme.VividSkyBlue,
98 },
99 },
100 },
101 xyzData: {
102 xValues: [1, 2, 3, 4, 5],
103 yValues: [320, 240, 280, 80, 640],
104 zValues: [20, 40, 20, 30, 35],
105 },
106 },
107 ],
108 // Add annotations
109 annotations: [
110 {
111 type: EAnnotationType.SVGTextAnnotation,
112 options: { text: "Labels", yAxisId: "y1", x1: 0, y1: 10, yCoordinateMode: ECoordinateMode.DataValue },
113 },
114 {
115 type: EAnnotationType.SVGTextAnnotation,
116 options: {
117 text: "can be placed",
118 yAxisId: "y1",
119 x1: 1,
120 y1: 8,
121 yCoordinateMode: ECoordinateMode.DataValue,
122 },
123 },
124 {
125 type: EAnnotationType.SVGTextAnnotation,
126 options: {
127 text: "on the chart",
128 yAxisId: "y1",
129 x1: 2,
130 y1: 9,
131 yCoordinateMode: ECoordinateMode.DataValue,
132 },
133 },
134 {
135 type: EAnnotationType.SVGTextAnnotation,
136 options: {
137 text: "Builder API Demo",
138 x1: 0.5,
139 y1: 0.5,
140 opacity: 0.33,
141 yCoordShift: -52,
142 xCoordinateMode: ECoordinateMode.Relative,
143 yCoordinateMode: ECoordinateMode.Relative,
144 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
145 verticalAnchorPoint: EVerticalAnchorPoint.Center,
146 fontSize: 36,
147 fontWeight: "Bold",
148 },
149 },
150 {
151 type: EAnnotationType.SVGTextAnnotation,
152 options: {
153 text: "Create SciChart charts with JSON Objects",
154 x1: 0.5,
155 y1: 0.5,
156 yCoordShift: 0,
157 opacity: 0.33,
158 xCoordinateMode: ECoordinateMode.Relative,
159 yCoordinateMode: ECoordinateMode.Relative,
160 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
161 verticalAnchorPoint: EVerticalAnchorPoint.Center,
162 fontSize: 24,
163 fontWeight: "Bold",
164 },
165 },
166 ],
167 // Add interaction (zooming, panning, tooltips)
168 modifiers: [
169 {
170 type: EChart2DModifierType.Rollover,
171 options: {
172 yAxisId: "y1",
173 rolloverLineStroke: appTheme.VividTeal,
174 },
175 },
176 { type: EChart2DModifierType.MouseWheelZoom },
177 { type: EChart2DModifierType.ZoomExtents },
178 ],
179 });
180};
181Full Chart Using Builder API with React
Overview
This example demonstrates how to integrate SciChart.js with React using the Builder API. The chart is fully configured via a JSON object that specifies axes, series, annotations, and interaction modifiers, making it simple to construct complex, high-performance charts. Developers can refer to the Builder API documentation for more details on this approach.
Technical Implementation
The implementation leverages the Builder API to define all chart components as JSON data. The React integration is achieved using the <SciChartReact/> component, which calls the asynchronous draw function to initialize the chart. This function sets up a categorical X-Axis, two numeric Y-Axes, and multiple series, including a spline mountain series with a gradient fill and a bubble series featuring custom point markers. For additional information on multi-axis configuration, see the Adding Multiple Axis tutorial, and for custom series implementation, explore the JavaScript Bubble Chart example.
Features and Capabilities
This example not only demonstrates the creation of a fully configured chart but also highlights advanced features such as gradient fills, custom point markers, and flexible annotation placement using both data and relative coordinate modes. Interaction modifiers like rollover, mouse wheel zoom, and zoom extents add an extra layer of interactivity. Annotations are precisely configured, as detailed in the Adding Annotations tutorial, providing clear insight into how text and coordinate modes can enhance data visualization.
Integration and Best Practices
Seamless React integration is a key aspect of this example. By wrapping the chart initialization within a React component, developers can manage the chart’s lifecycle alongside other React components. This design follows best practices for performance and maintainability. For further insights on integrating SciChart.js into React projects, check out the React Charts with SciChart.js: Introducing “SciChart React” article. Additionally, performance optimization techniques discussed in Performance Optimisation of JavaScript Applications & Charts can help ensure efficient rendering even with complex configurations.
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.
Chart from JSON
Demonstrates how to create a React Chart from JSON using the builder API.
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.