Simple Chart using Builder API
Demonstrates how to use the Builder Api to create a Simple Chart using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
theme.ts
1import {
2 SciChartSurface,
3 ESeriesType,
4 EAxisType,
5 EAnimationType,
6 NumberRange,
7 EAnnotationType,
8 EHorizontalAnchorPoint,
9 EVerticalAnchorPoint,
10 ECoordinateMode,
11} from "scichart";
12import { chartBuilder } from "scichart";
13import { appTheme } from "../../theme";
14
15export const drawExample = async (rootElement: string | HTMLDivElement) => {
16 // Create a chart using the Builder-API, an api that allows defining a chart
17 // with javascript-objects or JSON
18 return await chartBuilder.build2DChart(rootElement, {
19 // Set theme
20 surface: { theme: appTheme.SciChartJsTheme },
21 // Add xAxis
22 xAxes: { type: EAxisType.NumericAxis, options: { growBy: new NumberRange(0.1, 0.1) } },
23 // Add yAxis
24 yAxes: { type: EAxisType.NumericAxis, options: { growBy: new NumberRange(0.1, 0.1) } },
25 // Add series. More than one can be set in an array
26 series: [
27 {
28 // each series has type, options in the builder-API
29 type: ESeriesType.SplineLineSeries,
30 options: {
31 strokeThickness: 5,
32 interpolationPoints: 20,
33 stroke: appTheme.VividTeal,
34 animation: { type: EAnimationType.Scale, options: { duration: 500 } },
35 },
36 xyData: {
37 xValues: [1, 3, 4, 7, 9],
38 yValues: [10, 6, 7, 2, 16],
39 },
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: -26,
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 charts with JSON Objects",
64 x1: 0.5,
65 y1: 0.5,
66 yCoordShift: 26,
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};
79Simple Chart using Builder API in Angular
Overview
This example demonstrates how to create a high-performance chart in an Angular application using SciChart.js. By leveraging the Builder API with a declarative JSON configuration, developers can define numeric axes, a spline line series with smooth animations, and SVG text annotations effortlessly.
Technical Implementation
The chart is constructed via the function chartBuilder.build2DChart which accepts a JSON configuration object. This configuration sets up numeric x and y axes with growBy options, a spline line series that employs a scale animation (500ms duration) for smooth transitions, and SVG text annotations with relative coordinate positioning. For more details on configuring charts using JSON, refer to the Intro to the Builder API.
Features and Capabilities
The example showcases advanced features including customizable animations and precise annotation placements. The series animation creates an engaging visual experience, while the use of relative coordinates for SVG text annotations allows for flexible layout adjustments. Additional insights into managing annotations are available in the Tutorial 06 - Adding Annotations documentation.
Integration and Best Practices
Within an Angular environment, it is essential to employ proper resource management and performance optimization. The Builder API simplifies chart configuration, enabling seamless integration into Angular components. Developers should ensure the proper disposal of SciChart surfaces as detailed in the Memory Best Practices guide. Moreover, integration with Angular is further supported by packages like scichart-angular, and advanced animation techniques can be explored via the Angular Chart Data Animation demo.
angular Chart Examples & Demos
See Also: Builder (JSON / JS Objects) API (4 Demos)
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.
Angular 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
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.