React Triangle Series | Triangle Mesh Chart
Creates a React Triangle Series Chart using SciChart.js, with the following features: drawing triangles in strip mode (for letter "S"), drawing triangles in list mode (for letter "c") and drawing polygons (for letter "i").
drawExample.ts
index.tsx
theme.ts
1import {
2 EAxisAlignment,
3 NumberRange,
4 NumericAxis,
5 SciChartSurface,
6 XyDataSeries,
7 FastTriangleRenderableSeries,
8 ETriangleSeriesDrawMode,
9 CursorModifier,
10 IFillPaletteProvider,
11 EFillPaletteMode,
12 parseColorToUIntArgb,
13 IRenderableSeries,
14 MouseWheelZoomModifier,
15 ZoomExtentsModifier,
16 ZoomPanModifier,
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20class SPaletteProvider implements IFillPaletteProvider {
21 public readonly fillPaletteMode = EFillPaletteMode.SOLID;
22 private readonly palettedRed = parseColorToUIntArgb(appTheme.VividRed);
23 private readonly palettedGreen = parseColorToUIntArgb(appTheme.MutedBlue);
24
25 // tslint:disable-next-line:no-empty
26 public onAttached(parentSeries: IRenderableSeries): void {}
27 // tslint:disable-next-line:no-empty
28 public onDetached(): void {}
29
30 public overrideFillArgb(xValue: number, yValue: number, index: number): number {
31 if (index % 3 === 0) {
32 // or index % 2 === 0 to make a nice graident
33 return this.palettedRed;
34 } else {
35 return this.palettedGreen;
36 }
37 }
38}
39
40function generateScaledAndRotatedEquilateralTriangles(centers: number[][]) {
41 const xCoordinates = [];
42 const yCoordinates = [];
43 const numTriangles = centers.length;
44
45 for (let i = 0; i < numTriangles; i++) {
46 const [centerX, centerY] = centers[i];
47 const side = 20 + (i / (numTriangles - 1)) * 20;
48 const angle = (i / (numTriangles - 1)) * 60 * (Math.PI / 180);
49 const height = (Math.sqrt(3) / 2) * side;
50 const vertices = [
51 [0, -height / 2],
52 [-side / 2, height / 2],
53 [side / 2, height / 2],
54 ];
55
56 const rotatedVertices = vertices.map(([x, y]) => {
57 const rotatedX = x * Math.cos(angle) - y * Math.sin(angle);
58 const rotatedY = x * Math.sin(angle) + y * Math.cos(angle);
59 return [rotatedX + centerX, rotatedY + centerY];
60 });
61
62 const xCoords = rotatedVertices.map((vertex) => vertex[0]);
63 const yCoords = rotatedVertices.map((vertex) => vertex[1]);
64
65 xCoordinates.push(xCoords);
66 yCoordinates.push(yCoords);
67 }
68 return { xCoordinates, yCoordinates };
69}
70
71export const drawExample = async (rootElement: string | HTMLDivElement) => {
72 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
73 theme: appTheme.SciChartJsTheme,
74 });
75
76 sciChartSurface.debugRendering = false;
77 const xAxis = new NumericAxis(wasmContext, {
78 visibleRange: new NumberRange(0, 800),
79 flippedCoordinates: false,
80 axisAlignment: EAxisAlignment.Bottom,
81 labelPrecision: 2,
82 useNativeText: true,
83 drawMajorBands: false,
84 });
85 sciChartSurface.xAxes.add(xAxis);
86
87 const yAxis = new NumericAxis(wasmContext, {
88 visibleRange: new NumberRange(0, 500),
89 axisAlignment: EAxisAlignment.Left,
90 labelPrecision: 2,
91 flippedCoordinates: false,
92 useNativeText: true,
93 drawMajorBands: false,
94 });
95 sciChartSurface.yAxes.add(yAxis);
96
97 // Series 1 - The "S"
98 const sSeries = new FastTriangleRenderableSeries(wasmContext, {
99 dataSeries: new XyDataSeries(wasmContext, {
100 xValues: [
101 329, 300, 264, 234, 195, 174, 134, 136, 87, 106, 61, 103, 74, 115, 92, 129, 116, 164, 156, 193, 208,
102 247, 242, 286, 273, 321, 286, 327, 283, 321, 282, 308, 262, 280, 239, 213, 175, 144, 111, 82, 64,
103 ],
104 yValues: [
105 426, 411, 446, 415, 446, 417, 446, 414, 426, 396, 385, 370, 338, 341, 309, 313, 275, 295, 255, 284, 232,
106 264, 225, 248, 209, 212, 190, 174, 159, 136, 134, 102, 104, 75, 99, 68, 103, 76, 111, 83, 127,
107 ],
108 }),
109 fill: appTheme.MutedBlue,
110 drawMode: ETriangleSeriesDrawMode.Strip,
111 paletteProvider: new SPaletteProvider(),
112 });
113 sciChartSurface.renderableSeries.add(sSeries);
114
115 // Series 2 - The "C"
116 const triangleCenters = [
117 [566, 279],
118 [529, 292],
119 [483, 292],
120 [445, 274],
121 [409, 250],
122 [399, 208],
123 [401, 167],
124 [412, 129],
125 [437, 91],
126 [473, 77],
127 [527, 77],
128 [574, 90],
129 ];
130 const { xCoordinates, yCoordinates } = generateScaledAndRotatedEquilateralTriangles(triangleCenters);
131
132 const cSeries = new FastTriangleRenderableSeries(wasmContext, {
133 dataSeries: new XyDataSeries(wasmContext, {
134 xValues: xCoordinates.reduce((a, b) => a.concat(b), []),
135 yValues: yCoordinates.reduce((a, b) => a.concat(b), []),
136 }),
137 fill: appTheme.MutedBlue,
138 drawMode: ETriangleSeriesDrawMode.List,
139 });
140 sciChartSurface.renderableSeries.add(cSeries);
141
142 // Series 3 - The "I"
143 const pentagonsX = [
144 [696.0, 679.82, 686.0, 706.0, 712.18],
145 [696.0, 679.82, 686.0, 706.0, 712.18],
146 [696.0, 679.82, 686.0, 706.0, 712.18],
147 [696.0, 679.82, 686.0, 706.0, 712.18],
148 [696.0, 679.82, 686.0, 706.0, 712.18],
149 [696.0, 679.82, 686.0, 706.0, 712.18],
150 [696.0, 679.82, 686.0, 706.0, 712.18],
151 ];
152 const pentagonsY = [
153 [388.01, 376.26, 357.24, 357.24, 376.26],
154 [307.01, 295.26, 276.24, 276.24, 295.26],
155 [271.01, 259.26, 240.24, 240.24, 259.26],
156 [231.01, 219.26, 200.24, 200.24, 219.26],
157 [188.01, 176.26, 157.24, 157.24, 176.26],
158 [144.01, 132.26, 113.24, 113.24, 132.26],
159 [106.01, 94.26, 75.24, 75.24, 94.26],
160 ];
161
162 const iSeries = new FastTriangleRenderableSeries(wasmContext, {
163 dataSeries: new XyDataSeries(wasmContext, {
164 xValues: pentagonsX.reduce((a, b) => a.concat(b), []),
165 yValues: pentagonsY.reduce((a, b) => a.concat(b), []),
166 }),
167 fill: appTheme.VividRed,
168 drawMode: ETriangleSeriesDrawMode.Polygon,
169 polygonVertices: 5,
170 });
171 sciChartSurface.renderableSeries.add(iSeries);
172
173 sciChartSurface.chartModifiers.add(
174 new CursorModifier({
175 showTooltip: true,
176 crosshairStroke: "white",
177 tooltipContainerBackground: appTheme.DarkIndigo,
178 tooltipTextStroke: "white",
179 tooltipShadow: "transparent",
180 crosshairStrokeThickness: 1,
181 showAxisLabels: false,
182 }),
183 new MouseWheelZoomModifier(),
184 new ZoomExtentsModifier(),
185 new ZoomPanModifier()
186 );
187 return { sciChartSurface, wasmContext };
188};
189Triangle Series Chart Example (React)
Overview
This example demonstrates how to create Triangle Series Chart using SciChart.js in a React environment. The chart illustrates key features such as different drawing modes, palette providers, and gradient palette fills, providing a high-performance real-time data visualization solution.
Technical Implementation
The chart is initialized by creating a SciChartSurface via the asynchronous call to SciChartSurface.create(), a method detailed in the Tutorial 01 - Including SciChart.js in an HTML Page using CDN. The implementation sets up numeric axes using the NumericAxis class and populates the chart with a FastTriangleRenderableSeries, which uses an XyDataSeries to manage the data points. Advanced customizations include setting rounded corners, a gradient fill created with IFillPaletteProvider. For more details on these aspects, refer to the The Triangle Series Type documentation.
Features and Capabilities
Key technical features of this example include interactive modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier which enhance user interaction by providing seamless zooming and panning capabilities. The series is further enhanced with data labels that are styled and positioned above each column for improved readability. The use of gradient fills via PaletteFactory not only enhances visual appeal but also demonstrates advanced customization options, aligning with best practices for high-performance WebGL rendering. Details on gradient customization can be found in the The PaletteFactory Helper Class documentation.
Integration and Best Practices
In a JavaScript integration, the chart is created and managed by directly invoking the drawExample function. Resource management is handled by returning a destructor function that calls sciChartSurface.delete(), ensuring that resources are properly freed when the chart is no longer needed. This approach aligns with recommended practices for WebAssembly integration and efficient memory management as explained in the Getting Started with SciChart JS guide. Additionally, the direct method of instantiating and disposing of the chart ensures optimal performance in high-frequency data scenarios.
react Chart Examples & Demos
See Also: Charts added in v4 (16 Demos)
React Histogram Chart
Create a React Histogram Chart with custom texture fills and patterns. Try the SciChartReact wrapper component for seamless React integration today.
React Gantt Chart Example
Build a React Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
React Choropleth Map Example
Create a React Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
React Multi-Layer Map Example
Create a React Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
React Animated Bar Chart Example
Bring annual comparison data to life with the React Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.
React Vector Field Plot
View the React Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
React Waterfall Chart | Bridge Chart
Build a React Waterfall Chart with dynamic coloring, multi-line data labels and responsive design, using the SciChartReact component for seamless integration.
React Box Plot Chart
Try the React Box Plot Chart example for React-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling. Try the demo now.
React Treemap Chart
Create a React Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
React Map Chart with Heatmap overlay
Design a highly dynamic React Map Chart with Heatmap overlay with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
Realtime Audio Analyzer Bars Demo
Demonstrating the capability of SciChart.js to create a JavaScript Audio Analyzer Bars and visualize the Fourier-Transform of an audio waveform in realtime.
React Linear Gauges Example
View the React Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
React Order of Rendering Example
The React Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.
React Responsive HTML Annotations Example
Build Responsive React HTML Annotations with SciChart. Use the advanced CSS container queries for responsive text layout and custom design. View demo now.
HTML Annotations and Custom in-chart Controls Example
React HTML Chart Control example demonstrates advanced HTML annotation integration and how to render HTML components within charts. Try the SciChart demo.
React Polar Modifiers | Polar Interactivity Modifiers Demo
Explore SciChart's Polar Interactivity Modifiers including zooming, panning, and cursor tracking. Try the demo to trial the Polar Chart Behavior Modifiers.