Custom Types with Builder API

Demonstrates how to use the Builder Api with Custom Types using SciChart.js, High Performance JavaScript Charts

Fullscreen

Edit

 Edit

Docs

drawExample.ts

index.tsx

theme.ts

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

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.

React Chart with Reusable Templates using Shared Data | SciChart.js Demo

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

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