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
Copy to clipboard
Minimise
Fullscreen
1import {
2 SciChartSurface,
3 chartBuilder,
4 EAxisType,
5 ELabelProviderType,
6 EAxisAlignment,
7 NumberRange,
8 ESeriesType,
9 GradientParams,
10 EPointMarkerType,
11 EAnnotationType,
12 ECoordinateMode,
13 EHorizontalAnchorPoint,
14 EVerticalAnchorPoint,
15 EChart2DModifierType,
16 Point,
17} from "scichart";
18import { appTheme } from "../../theme";
19
20export const drawExample = async (rootElement: string | HTMLDivElement) => {
21 // Create a chart using the Builder-API, an api that allows defining a chart
22 // with javascript-objects or JSON
23 return await chartBuilder.build2DChart(rootElement, {
24 // Set theme
25 surface: { theme: appTheme.SciChartJsTheme },
26 // Add XAxis
27 xAxes: [
28 {
29 type: EAxisType.CategoryAxis,
30 options: {
31 axisTitle: "X Axis Title",
32 labelProvider: {
33 type: ELabelProviderType.Text,
34 options: {
35 labels: { 1: "one", 2: "two", 3: "three", 4: "four", 5: "five" },
36 },
37 },
38 },
39 },
40 ],
41 // Add multiple Y-Axis
42 yAxes: [
43 {
44 type: EAxisType.NumericAxis,
45 options: {
46 id: "y1",
47 axisTitle: "Left Axis",
48 axisAlignment: EAxisAlignment.Left,
49 visibleRange: new NumberRange(0, 20),
50 zoomExtentsToInitialRange: true,
51 },
52 },
53 {
54 type: EAxisType.NumericAxis,
55 options: {
56 id: "y2",
57 axisTitle: "Right Axis",
58 axisAlignment: EAxisAlignment.Right,
59 visibleRange: new NumberRange(0, 800),
60 labelPrecision: 0,
61 zoomExtentsToInitialRange: true,
62 },
63 },
64 ],
65 // Add series. More than one can be set in an array
66 series: [
67 {
68 // each series has type, options in the builder-API
69 type: ESeriesType.SplineMountainSeries,
70 options: {
71 yAxisId: "y1",
72 stroke: appTheme.VividSkyBlue,
73 strokeThickness: 5,
74 fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
75 { color: appTheme.VividTeal, offset: 0.2 },
76 { color: "Transparent", offset: 1 },
77 ]),
78 },
79 xyData: { xValues: [1, 2, 3, 4, 5], yValues: [8, 6, 7, 2, 16] },
80 },
81 {
82 type: ESeriesType.BubbleSeries,
83 options: {
84 yAxisId: "y2",
85 pointMarker: {
86 type: EPointMarkerType.Ellipse,
87 options: {
88 width: 100,
89 height: 100,
90 strokeThickness: 10,
91 fill: appTheme.PaleSkyBlue,
92 stroke: appTheme.VividSkyBlue,
93 },
94 },
95 },
96 xyzData: {
97 xValues: [1, 2, 3, 4, 5],
98 yValues: [320, 240, 280, 80, 640],
99 zValues: [20, 40, 20, 30, 35],
100 },
101 },
102 ],
103 // Add annotations
104 annotations: [
105 {
106 type: EAnnotationType.SVGTextAnnotation,
107 options: { text: "Labels", yAxisId: "y1", x1: 0, y1: 10, yCoordinateMode: ECoordinateMode.DataValue },
108 },
109 {
110 type: EAnnotationType.SVGTextAnnotation,
111 options: {
112 text: "can be placed",
113 yAxisId: "y1",
114 x1: 1,
115 y1: 8,
116 yCoordinateMode: ECoordinateMode.DataValue,
117 },
118 },
119 {
120 type: EAnnotationType.SVGTextAnnotation,
121 options: {
122 text: "on the chart",
123 yAxisId: "y1",
124 x1: 2,
125 y1: 9,
126 yCoordinateMode: ECoordinateMode.DataValue,
127 },
128 },
129 {
130 type: EAnnotationType.SVGTextAnnotation,
131 options: {
132 text: "Builder API Demo",
133 x1: 0.5,
134 y1: 0.5,
135 opacity: 0.33,
136 yCoordShift: -52,
137 xCoordinateMode: ECoordinateMode.Relative,
138 yCoordinateMode: ECoordinateMode.Relative,
139 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
140 verticalAnchorPoint: EVerticalAnchorPoint.Center,
141 fontSize: 36,
142 fontWeight: "Bold",
143 },
144 },
145 {
146 type: EAnnotationType.SVGTextAnnotation,
147 options: {
148 text: "Create SciChart charts with JSON Objects",
149 x1: 0.5,
150 y1: 0.5,
151 yCoordShift: 0,
152 opacity: 0.33,
153 xCoordinateMode: ECoordinateMode.Relative,
154 yCoordinateMode: ECoordinateMode.Relative,
155 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
156 verticalAnchorPoint: EVerticalAnchorPoint.Center,
157 fontSize: 24,
158 fontWeight: "Bold",
159 },
160 },
161 ],
162 // Add interaction (zooming, panning, tooltips)
163 modifiers: [
164 {
165 type: EChart2DModifierType.Rollover,
166 options: {
167 yAxisId: "y1",
168 rolloverLineStroke: appTheme.VividTeal,
169 },
170 },
171 { type: EChart2DModifierType.MouseWheelZoom },
172 { type: EChart2DModifierType.ZoomExtents },
173 ],
174 });
175};
176See 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.
Quick Links
Useful Links
SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.