JavaScript 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.
drawExample.ts
index.html
vanilla.ts
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};
88Shared Data - JavaScript
Overview
This example demonstrates how to create reusable chart templates using the SciChart.js Builder API in a JavaScript environment. The chart template is defined using a JSON object that outlines multiple series and SVG text annotations, while the actual data is applied later via a shared data structure. Developers can learn more about the JSON configuration capabilities in the Intro to the Builder API | JavaScript Chart Documentation - SciChart.
Technical Implementation
The implementation leverages a JSON definition to configure various chart elements including a ColumnSeries, LineSeries, and SplineBandSeries. Data is injected asynchronously using async/await, ensuring efficient initialization. The shared data object enables the dynamic integration of x, column, and line data across multiple series, resonating with the practices outlined in the Working with Data | JavaScript Chart Documentation - SciChart. Additionally, the configuration includes SVG text annotations as described in the Tutorial 06 - Adding Annotations | JavaScript Chart Documentation guide.
Features and Capabilities
This example offers advanced functionality such as multi-series rendering, real-time data update capabilities through shared data, and custom theming via an externally defined appTheme. These features allow developers to build dynamic and visually consistent charts. Further customization of themes can be explored in the Chart Styling - Creating a Custom Theme - SciChart documentation.
Integration and Best Practices
Although a React component is provided to showcase multi-framework integration, the focus here is on JavaScript implementation. The example emphasizes best practices such as asynchronous chart initialization and proper memory management through chart disposal, which are critical for optimizing performance. Developers looking to further refine performance should consult the Memory Best Practices | JavaScript Chart Documentation - SciChart and the Getting Started with SciChart JS guides for comprehensive insights.
javascript Chart Examples & Demos
See 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.
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
Demonstrates how to create a JavaScript Chart from JSON using the builder API.
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.