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 React
Overview
This example demonstrates how to create a high-performance chart using SciChart.js and its Builder API within a React environment. The chart is defined using a declarative JSON configuration that sets up numeric x and y axes, a spline line series with smooth animations, and SVG text annotations with relative coordinate positioning. This approach simplifies complex chart creation as detailed in the JavaScript Builder API Documentation.
Technical Implementation
The chart is implemented using the Builder API through the function chartBuilder.build2DChart. This function accepts a JSON object that describes the chart elements such as axes (configured with growBy settings using NumberRange), a spline line series (with stroke properties, interpolation points, and a Scale animation effect with a 500ms duration), and annotations configured with relative coordinates. More insights into configuring charts declaratively in React can be found in the Tutorial 01 - Setting up a project with scichart-react and config object.
Features and Capabilities
The example leverages advanced features including a spline line series that uses built-in animation for enhanced visual engagement and SVG text annotations that are centrally positioned using relative coordinates. These capabilities enable developers to rapidly build interactive and visually compelling chart experiences. For additional details on annotations and their configuration, refer to the Tutorial 06 - Adding Annotations.
Integration and Best Practices
React integration is seamlessly achieved through the <SciChartReact/> component, which encapsulates the chart initialization logic (via the initChart property) within a React component structure. This component-based approach not only streamlines the integration process but also ensures efficient resource management and cleanup, adhering to best practices in modern React development. Developers seeking further guidance can review Creating a SciChart React Component from the Ground Up for more details on crafting reusable React components for charting.
react 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 React Chart from JSON using the builder API.
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
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.