Angular 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.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};
88Angular Chart with Reusable Templates using Shared Data
Overview
This example demonstrates how to create reusable chart templates in an Angular application using the SciChart.js Builder API. The chart configuration is defined as a JSON object, where the data is injected later using a shared data mechanism. Developers can dynamically embed data such as x, column, and line series values, thereby promoting modularity and reusability.
Technical Implementation
The core implementation leverages the SciChart.js Builder API to define a chart template with multiple series types including ColumnSeries, LineSeries, and SplineBandSeries and includes SVG text annotations for additional context. This JSON-based configuration enables asynchronous chart initialization via async/await, which is a recommended best practice as explained in async/await in Angular ngOnInit and Getting Started with SciChart JS. Custom themes are applied to ensure consistent styling as shown in the Chart Styling - Creating a Custom Theme documentation. Furthermore, the JSON configuration approach aligns with the guidance found in the Intro to the Builder API, highlighting how to build complex charts with straightforward, declarative definitions.
Features and Capabilities
The example supports multi-series rendering by combining column, line, and spline band series, which enables developers to visualize data trends effectively. Shared data integration allows the template to be defined separately from the dataset, enhancing real-time update capabilities. This approach is ideal for applications requiring frequent data updates and can be compared with scenarios covered in Working with Data | JavaScript Chart Documentation - SciChart. In addition, comprehensive annotations are added to the chart to offer contextual insights, reinforcing how annotations can be effectively used as per the Tutorial 06 - Adding Annotations guide.
Integration and Best Practices
For Angular applications, it is crucial to adopt both asynchronous initialization and proper memory management to ensure optimal performance. The design separates chart configuration from data, promoting code modularity. Developers are encouraged to clean up resources after chart destruction to prevent memory leaks, following best practices outlined in the Memory Best Practices | JavaScript Chart Documentation - SciChart guide. Overall, by utilizing the Builder API for JSON chart configuration in Angular, this example provides a robust framework for developing scalable and dynamic charting solutions with SciChart.js, demonstrating efficient integration techniques and performance optimization methods.
angular 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 Angular 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.