Angular Triangle Series | Triangle Mesh Chart
Creates a Angular 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
angular.ts
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 (Angular)
Overview
This example demonstrates how to create Triangle Series Chart using SciChart.js in a Angular 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.
angular Chart Examples & Demos
See Also: Charts added in v4 (16 Demos)
Angular Histogram Chart
Create an Angular Histogram Chart with custom texture fills and patterns. Try the SciChartAngular wrapper component for seamless Angular integration today.
Angular Gantt Chart Example
Build an Angular Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
Angular Choropleth Map Example
Create an Angular Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
Angular Multi-Layer Map Example
Create a Angular Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
Angular Animated Bar Chart Example
Bring annual comparison data to life with the Angular Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.
Angular Vector Field Plot
View the Angular Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
Angular Waterfall Chart | Bridge Chart
Build an Angular Waterfall Chart with dynamic coloring, multi-line data labels & responsive design, using ScichartAngular component for seamless integration
Angular Box Plot Chart
Try the Angular Box Plot Chart example for Angular-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling. Try the demo now.
Angular Treemap Chart
Create an Angular Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
Angular Map Chart with Heatmap overlay
Design a highly dynamic Angular 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.
Angular Linear Gauges Example
View the Angular Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
Angular Order of Rendering Example
The Angular Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.
Angular Responsive HTML Annotations Example
Build Responsive Angular 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
Angular HTML Chart Control example demonstrates advanced HTML annotation integration and how to render HTML components within charts. Try the SciChart demo.
Angular 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.