React Chart with Reusable Templates using Shared Data

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.

Fullscreen

Edit

 Edit

Docs

drawExample.ts

index.tsx

theme.ts

Copy to clipboard
Minimise
Fullscreen
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

See Also: Builder (JSON / JS Objects) API (4 Demos)

Simple Chart using Builder API | SciChart.js Demo

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 | SciChart.js Demo

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.

Chart from JSON | SciChart.js Demo

Chart from JSON

Demonstrates how to create a React Chart from JSON using the builder API.

Custom Types with Builder API | SciChart.js Demo

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.

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.