Demonstrates how to use the Builder Api to create Reusable Chart Templates using SciChart.js Builder API. Use this method when you want to create a template for a chart and add data later.
drawExample.ts
index.tsx
theme.ts
1import {
2 SciChartSurface,
3 chartBuilder,
4 ESeriesType,
5 ISciChart2DDefinition,
6 TSharedDataDefinition,
7 EAnnotationType,
8 ECoordinateMode,
9 EHorizontalAnchorPoint,
10 EVerticalAnchorPoint,
11} from "scichart";
12import { appTheme } from "../../theme";
13
14export const drawExample = async (rootElement: string | HTMLDivElement) => {
15 // Create a definition using dataIds
16 const chartTemplate: ISciChart2DDefinition = {
17 // Set theme
18 surface: { theme: appTheme.SciChartJsTheme },
19 // Set template of series without data and data Ids
20 series: [
21 {
22 type: ESeriesType.ColumnSeries,
23 options: { dataPointWidth: 0.5, fill: appTheme.VividSkyBlue + "77", stroke: appTheme.PaleSkyBlue },
24 xyData: { xDataId: "x", yDataId: "col" },
25 },
26 {
27 type: ESeriesType.LineSeries,
28 options: { stroke: appTheme.VividPink, strokeThickness: 3 },
29 xyData: { xDataId: "x", yDataId: "line" },
30 },
31 {
32 type: ESeriesType.SplineBandSeries,
33 options: {
34 stroke: appTheme.VividOrange,
35 strokeY1: appTheme.VividSkyBlue,
36 fill: appTheme.VividOrange + "33",
37 fillY1: appTheme.VividSkyBlue + "33",
38 },
39 xyyData: { xDataId: "x", yDataId: "col", y1DataId: "line" },
40 },
41 ],
42 // Add annotations
43 annotations: [
44 {
45 type: EAnnotationType.SVGTextAnnotation,
46 options: {
47 text: "Builder API Demo",
48 x1: 0.5,
49 y1: 0.5,
50 opacity: 0.33,
51 yCoordShift: -52,
52 xCoordinateMode: ECoordinateMode.Relative,
53 yCoordinateMode: ECoordinateMode.Relative,
54 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
55 verticalAnchorPoint: EVerticalAnchorPoint.Center,
56 fontSize: 36,
57 fontWeight: "Bold",
58 },
59 },
60 {
61 type: EAnnotationType.SVGTextAnnotation,
62 options: {
63 text: "Create SciChart templates with JSON Objects",
64 x1: 0.5,
65 y1: 0.5,
66 yCoordShift: 0,
67 opacity: 0.33,
68 xCoordinateMode: ECoordinateMode.Relative,
69 yCoordinateMode: ECoordinateMode.Relative,
70 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
71 verticalAnchorPoint: EVerticalAnchorPoint.Center,
72 fontSize: 24,
73 fontWeight: "Bold",
74 },
75 },
76 ],
77 };
78
79 // When you want to add data for the chart later
80 const sharedData: TSharedDataDefinition = { x: [1, 2, 3, 4, 5], col: [8, 2, 3, 7, 10], line: [10, 6, 7, 2, 16] };
81
82 // Build the chart by combining the definition and data
83 return await chartBuilder.build2DChart(rootElement, {
84 ...chartTemplate,
85 sharedData,
86 });
87};
88
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 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.