Demonstrates how to use the Builder Api with Custom Types using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
theme.ts
1import {
2 SciChartSurface,
3 chartBuilder,
4 ESeriesType,
5 EAxisType,
6 ELineDrawMode,
7 XyDataSeries,
8 EAnimationType,
9 EAxisAlignment,
10 EPaletteProviderType,
11 EFillPaletteMode,
12 EStrokePaletteMode,
13 IFillPaletteProvider,
14 IStrokePaletteProvider,
15 IRenderableSeries,
16 EBaseType,
17 parseColorToUIntArgb,
18 NumberRange,
19 EAnnotationType,
20 ECoordinateMode,
21 EHorizontalAnchorPoint,
22 EVerticalAnchorPoint,
23} from "scichart";
24import { appTheme } from "../../theme";
25
26// Define a custom PaletteProvider
27export class ExampleMountainPaletteProvider implements IStrokePaletteProvider, IFillPaletteProvider {
28 public static Name: "ExampleMountain";
29 public readonly strokePaletteMode = EStrokePaletteMode.SOLID;
30 public readonly fillPaletteMode = EFillPaletteMode.SOLID;
31 private readonly palettedStroke: number;
32 private readonly palettedFill: number;
33 private readonly options: { stroke: string; fill: string };
34
35 constructor(options: { stroke: string; fill: string }) {
36 this.options = options;
37 this.palettedStroke = parseColorToUIntArgb(options.stroke);
38 this.palettedFill = parseColorToUIntArgb(options.fill);
39 }
40
41 // tslint:disable-next-line:no-empty
42 public onAttached(parentSeries: IRenderableSeries): void {}
43
44 // tslint:disable-next-line:no-empty
45 public onDetached(): void {}
46
47 public overrideFillArgb(xValue: number, yValue: number, index: number): number {
48 if (yValue > 0.5 && yValue < 0.75) {
49 return this.palettedFill;
50 } else {
51 return undefined;
52 }
53 }
54
55 public overrideStrokeArgb(xValue: number, yValue: number, index: number): number {
56 if (yValue > 0.5 && yValue < 0.75) {
57 return this.palettedStroke;
58 } else {
59 return undefined;
60 }
61 }
62
63 // Add a toJSON method so this can be serialized.
64 // @ts-ignore
65 public toJSON() {
66 return {
67 type: EPaletteProviderType.Custom,
68 customType: ExampleMountainPaletteProvider.Name,
69 options: this.options,
70 };
71 }
72}
73
74// Register it for use by the builder api
75chartBuilder.registerType(
76 EBaseType.PaletteProvider,
77 ExampleMountainPaletteProvider.Name,
78 (options: { stroke: string; fill: string }) => new ExampleMountainPaletteProvider(options)
79);
80
81export const drawExample = async (rootElement: string | HTMLDivElement) => {
82 // Build the surface
83 const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart(rootElement, {
84 surface: { theme: appTheme.SciChartJsTheme },
85 yAxes: {
86 type: EAxisType.NumericAxis,
87 options: { axisAlignment: EAxisAlignment.Left, visibleRange: new NumberRange(0, 1) },
88 },
89 // Add annotations
90 annotations: [
91 {
92 type: EAnnotationType.SVGTextAnnotation,
93 options: {
94 text: "Builder API Demo",
95 x1: 0.5,
96 y1: 0.5,
97 opacity: 0.33,
98 yCoordShift: -26,
99 xCoordinateMode: ECoordinateMode.Relative,
100 yCoordinateMode: ECoordinateMode.Relative,
101 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
102 verticalAnchorPoint: EVerticalAnchorPoint.Center,
103 fontSize: 36,
104 fontWeight: "Bold",
105 },
106 },
107 {
108 type: EAnnotationType.SVGTextAnnotation,
109 options: {
110 text: "Create SciChart charts with JSON Objects",
111 x1: 0.5,
112 y1: 0.5,
113 yCoordShift: 26,
114 opacity: 0.33,
115 xCoordinateMode: ECoordinateMode.Relative,
116 yCoordinateMode: ECoordinateMode.Relative,
117 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
118 verticalAnchorPoint: EVerticalAnchorPoint.Center,
119 fontSize: 24,
120 fontWeight: "Bold",
121 },
122 },
123 ],
124 });
125 // Build the series.
126 // By doing this separately we can easily get the reference to the series so we can add generated data to it
127 const [mountainSeries] = chartBuilder.buildSeries(wasmContext, {
128 type: ESeriesType.MountainSeries,
129 options: {
130 paletteProvider: {
131 type: EPaletteProviderType.Custom,
132 customType: ExampleMountainPaletteProvider.Name,
133 options: { stroke: appTheme.MutedRed, fill: appTheme.VividOrange },
134 },
135 fillLinearGradient: {
136 startPoint: { x: 0, y: 0 },
137 endPoint: { x: 0, y: 1 },
138 gradientStops: [
139 { color: appTheme.VividBlue, offset: 0 },
140 { color: "Transparent", offset: 1 },
141 ],
142 },
143 stroke: appTheme.PaleSkyBlue,
144 strokeThickness: 3,
145 drawNaNAs: ELineDrawMode.PolyLine,
146 animation: { type: EAnimationType.Scale, options: { ease: "cubic" } },
147 },
148 });
149
150 // Create a dataSeries the normal way
151 const dataSeries = new XyDataSeries(wasmContext);
152 // Generate data
153 const POINTS = 1000;
154 const STEP = (3 * Math.PI) / POINTS;
155 for (let i = 0; i <= 1000; i++) {
156 let y = Math.abs(Math.sin(i * STEP));
157 if (y < 0.2) {
158 y = NaN;
159 }
160 dataSeries.append(i, y);
161 }
162 mountainSeries.dataSeries = dataSeries;
163 // Since we built the series separately, we have to manually add it to the surface
164 sciChartSurface.renderableSeries.add(mountainSeries);
165
166 return { sciChartSurface, wasmContext };
167};
168
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.
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.
Demonstrates how to create a React Chart from JSON using the builder API.
Demonstrates how to use the Builder Api to create Reusable Chart Templates.Data can be easily integrated into a definition and shared between series