React 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};
88React Chart with Reusable Templates using Shared Data
Overview
This example demonstrates how to create reusable chart templates with shared data in a React application using SciChart.js. The implementation uses the Builder API to define the chart configuration as a JSON object, which allows developers to create complex charts with multiple series and annotations, and then inject data later. The chart is rendered using the <SciChartReact/> component, ensuring seamless integration with React.
Technical Implementation
The core of the example is based on a JSON definition that configures various chart elements such as a ColumnSeries, LineSeries, and SplineBandSeries. It also includes annotations to display textual elements on the chart. By using the Builder API (see Builder API - SciChart) along with the shared data concept, the chart can be built asynchronously via an async function, making use of JavaScript’s async/await for efficient performance. The chart configuration leverages a custom theme defined externally, which facilitates consistent styling across components. For further details on setting up asynchronous chart initialization in React, refer to Tutorial 01 - Setting up a project with scichart-react and config object.
Features and Capabilities
This example highlights several advanced features such as:
- Reusable Chart Templates: Define charts using a configuration object and input data at a later stage, enabling flexibility in dynamic applications, as shown in the React Chart with Reusable Templates using Shared Data demo.
- Dynamic Shared Data Integration: Shared data such as x, y, and additional data arrays are injected during chart creation, which allows for easy updates and real-time data streaming.
- Multi-series Rendering with Annotations: Multiple series are rendered simultaneously along with SVG text annotations, providing clarity and additional information directly on the chart.
Integration and Best Practices
The integration uses the <SciChartReact/> component, which encapsulates the initialization process, and demonstrates best practices for incorporating third-party charting libraries into React. Developers are encouraged to maintain modular and reusable code by separating the chart definition from its data, as this example does. Performance optimizations are achieved by leveraging asynchronous initialization and the inherent efficiency of the Builder API. For insights on React integration and performance tuning, see React Charts with SciChart.js: Introducing “SciChart React”.
By following these guidelines and leveraging the provided documentation, developers can build high-performance, feature-rich charts in their React applications using SciChart.js.
react 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 React 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.