Angular Multi Cycle-Polar Line Example
Creates a Angular Multi Cycle Polar Line chart using the PolarLineRenderableSeries to show historical average surface temperatures by month.
drawExample.ts
angular.ts
theme.ts
1import {
2 PolarMouseWheelZoomModifier,
3 PolarZoomExtentsModifier,
4 PolarPanModifier,
5 XyDataSeries,
6 PolarNumericAxis,
7 SciChartPolarSurface,
8 EPolarAxisMode,
9 NumberRange,
10 GradientParams,
11 Point,
12 PolarLegendModifier,
13 PolarCategoryAxis,
14 PaletteFactory,
15 PolarLineRenderableSeries,
16 EAnimationType,
17 ELegendPlacement,
18} from "scichart";
19import { appTheme } from "../../../theme";
20
21export const MONTHS_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
22export const YEARS = [
23 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013,
24 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024,
25];
26export const TEMPERATURE_DATA = [
27 [
28 12.312858, 12.794863, 13.173332, 14.242319, 15.026494, 15.8967905, 16.125097, 16.0047, 15.245733, 14.251504,
29 13.146228, 12.325032,
30 ],
31 [
32 12.08245, 12.507443, 13.09871, 14.017178, 14.894451, 15.667089, 16.022583, 16.000057, 15.118811, 14.006094,
33 13.150954, 12.41957,
34 ],
35 [
36 12.0726595, 12.415118, 13.238875, 14.033698, 15.009245, 15.902833, 16.056944, 15.977586, 15.381688, 14.393545,
37 13.352154, 12.617628,
38 ],
39 [
40 12.393999, 12.883712, 13.373737, 14.482489, 15.439859, 16.166082, 16.350761, 16.253042, 15.393574, 14.268745,
41 13.131387, 12.578128,
42 ],
43 [
44 12.214997, 12.681549, 13.018332, 14.058149, 14.964326, 15.7506695, 16.027044, 15.874023, 15.245672, 14.145028,
45 13.067392, 12.441928,
46 ],
47 [
48 12.052399, 12.593054, 13.190579, 14.27894, 15.041011, 15.73894, 15.99124, 15.936546, 15.207633, 14.050722,
49 13.023944, 12.323272,
50 ],
51 [
52 12.2122, 12.446788, 13.249987, 14.208252, 15.215851, 15.871904, 16.20851, 16.060638, 15.368203, 14.34036,
53 13.470086, 12.695609,
54 ],
55 [
56 12.53721, 12.721423, 13.600142, 14.29804, 15.341601, 16.006063, 16.26295, 16.064987, 15.451588, 14.365481,
57 13.315763, 12.543315,
58 ],
59 [
60 12.548483, 12.642036, 13.243136, 14.241573, 15.247941, 15.844065, 16.181763, 16.1575, 15.520181, 14.550451,
61 13.333045, 12.84282,
62 ],
63 [
64 12.400176, 12.756578, 13.39796, 14.34727, 15.051334, 15.889484, 15.953155, 15.950004, 15.406296, 14.453116,
65 13.441607, 12.569768,
66 ],
67 [
68 12.589498, 12.735534, 13.497629, 14.432102, 15.331207, 16.059366, 16.314322, 16.141184, 15.57603, 14.618258,
69 13.501898, 12.766566,
70 ],
71 [
72 12.398165, 12.818922, 13.397719, 14.291743, 15.189911, 16.064089, 16.2323, 16.182554, 15.494456, 14.584331,
73 13.47152, 12.860763,
74 ],
75 [
76 12.805192, 12.817515, 13.409858, 14.535373, 15.345493, 15.959107, 16.23532, 16.092844, 15.3565445, 14.432366,
77 13.331739, 12.576232,
78 ],
79 [
80 12.113923, 12.408767, 13.427934, 14.2349825, 15.156445, 15.784512, 16.205524, 16.032562, 15.416246, 14.483524,
81 13.421947, 12.621545,
82 ],
83 [
84 12.501715, 12.694814, 13.287948, 14.301582, 15.257585, 15.987313, 16.366655, 16.15678, 15.5500765, 14.526386,
85 13.511364, 12.733565,
86 ],
87 [
88 12.635704, 12.951749, 13.678116, 14.614076, 15.459992, 16.069487, 16.280928, 16.157698, 15.545397, 14.562755,
89 13.5042715, 12.563801,
90 ],
91 [
92 12.351584, 12.553582, 13.350575, 14.375279, 15.21987, 16.003353, 16.372034, 16.222324, 15.493718, 14.475969,
93 13.275867, 12.627507,
94 ],
95 [
96 12.276481, 12.550572, 13.272944, 14.415976, 15.43513, 16.102345, 16.269238, 16.187937, 15.559264, 14.665552,
97 13.56644, 12.633436,
98 ],
99 [
100 12.58878, 12.745218, 13.43308, 14.325264, 15.283069, 16.090355, 16.20393, 16.16618, 15.616046, 14.497789,
101 13.520184, 12.792078,
102 ],
103 [
104 12.568984, 12.633794, 13.499797, 14.471165, 15.444962, 16.055035, 16.294695, 16.247393, 15.630797, 14.609954,
105 13.421647, 12.853656,
106 ],
107 [
108 12.634522, 12.928324, 13.637803, 14.418158, 15.4382105, 16.169155, 16.382626, 16.353651, 15.713228, 14.8876295,
109 13.75632, 13.204671,
110 ],
111 [
112 12.993054, 13.417261, 14.034957, 14.891214, 15.676935, 16.244125, 16.589472, 16.512617, 15.804098, 14.787963,
113 13.775281, 13.000732,
114 ],
115 [
116 12.8454685, 13.228996, 13.908754, 14.689877, 15.634159, 16.184803, 16.494555, 16.407322, 15.725905, 14.80573,
117 13.618404, 13.037093,
118 ],
119 [
120 12.682678, 12.992087, 13.682286, 14.666776, 15.513449, 16.20794, 16.507273, 16.319836, 15.645767, 14.800986,
121 13.608685, 12.996236,
122 ],
123 [
124 12.726316, 13.037866, 13.917256, 14.798871, 15.618407, 16.351522, 16.62583, 16.4674, 15.82509, 14.899514,
125 13.775336, 13.204703,
126 ],
127 [
128 13.023134, 13.328617, 13.896722, 14.881941, 15.727563, 16.34306, 16.554218, 16.378103, 15.879856, 14.822323,
129 13.907555, 12.900242,
130 ],
131 [
132 12.6852045, 12.789691, 13.598597, 14.552206, 15.518996, 16.195406, 16.559742, 16.422468, 15.847732, 14.867675,
133 13.7164545, 12.987495,
134 ],
135 [
136 12.719246, 12.959181, 13.803046, 14.644942, 15.517449, 16.290827, 16.606314, 16.40706, 15.795761, 14.855305,
137 13.532649, 12.935972,
138 ],
139 [
140 12.688526, 13.022077, 13.9205885, 14.682203, 15.656947, 16.514093, 16.953165, 16.82091, 16.376972, 15.296179,
141 14.224238, 13.510272,
142 ],
143 [
144 13.140137, 13.539749, 14.137102, 15.031858, 15.913483, 16.657152, 16.907806, 16.822422, 16.174273, 15.245267,
145 14.098477, 13.423883,
146 ], // 2024 Jan - Dec
147];
148
149export const drawExample = async (rootElement: string | HTMLDivElement) => {
150 const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
151 theme: appTheme.SciChartJsTheme,
152 title: ["Mean surface temperature by month", "(past 30 years)"],
153 titleStyle: {
154 fontSize: 24,
155 },
156 });
157
158 const radialYAxis = new PolarNumericAxis(wasmContext, {
159 polarAxisMode: EPolarAxisMode.Radial,
160 drawLabels: true,
161 labelPrecision: 0,
162 labelStyle: {
163 color: "white",
164 },
165 labelPostfix: "°C",
166 autoTicks: false,
167 majorDelta: 1,
168 drawMinorGridLines: false,
169 visibleRange: new NumberRange(12, 17), // min and max temperatures
170 zoomExtentsToInitialRange: true,
171 innerRadius: 0.05, // center gap size
172 startAngle: Math.PI / 2, // make temperature labels stacked vertically
173 });
174 sciChartSurface.yAxes.add(radialYAxis);
175
176 const polarXAxis = new PolarCategoryAxis(wasmContext, {
177 polarAxisMode: EPolarAxisMode.Angular, // set this as the angular axis
178 autoTicks: false,
179 majorDelta: 1, // one tick per month
180 flippedCoordinates: true, // grow clockwise
181 startAngle: Math.PI / 2, // start "Jan" at 12 o'clock
182 visibleRange: new NumberRange(0, 12), // 12 months
183 labels: MONTHS_SHORT,
184 });
185 sciChartSurface.xAxes.add(polarXAxis);
186
187 // Add series
188 const highlightedPalette = PaletteFactory.createYGradient(
189 wasmContext,
190 new GradientParams(new Point(0, 0), new Point(0, 1), [
191 { offset: 0, color: appTheme.VividBlue },
192 { offset: 1, color: appTheme.VividPink },
193 ]),
194 new NumberRange(13, 17) // the range of y-values to apply the gradient to
195 );
196
197 const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
198
199 for (let i = 0; i < TEMPERATURE_DATA.length; i++) {
200 sciChartSurface.renderableSeries.add(
201 new PolarLineRenderableSeries(wasmContext, {
202 // apply a gradient stroke to the last 5 years (2019-2024)
203 ...(i >= TEMPERATURE_DATA.length - 5
204 ? {
205 paletteProvider: highlightedPalette,
206 strokeThickness: 3,
207 }
208 : {
209 stroke: `rgba(${i * 2}, ${i}, ${i * 2 + 20}, 1)`,
210 strokeThickness: 2,
211 }),
212
213 seriesName: `${YEARS[i]}`,
214 animation: {
215 type: EAnimationType.Sweep,
216 options: {
217 duration: 300,
218 delay: 100 * i,
219 },
220 },
221 clipToTotalAngle: true,
222 dataSeries: new XyDataSeries(wasmContext, {
223 xValues: xValues,
224 yValues: [
225 ...TEMPERATURE_DATA[i],
226 TEMPERATURE_DATA[i + 1] ? TEMPERATURE_DATA[i + 1][0] : TEMPERATURE_DATA[i][11],
227 ],
228 }),
229 })
230 );
231 }
232
233 // split half of the years into two legends
234 const leftLegend = new PolarLegendModifier({
235 showCheckboxes: true,
236 backgroundColor: "rgba(90, 90, 90, 0.5)",
237 placement: ELegendPlacement.TopLeft,
238 });
239
240 const rightLegend = new PolarLegendModifier({
241 showCheckboxes: true,
242 backgroundColor: "rgba(90, 90, 90, 0.5)",
243 placement: ELegendPlacement.TopRight,
244 });
245
246 // Add modifiers
247 sciChartSurface.chartModifiers.add(
248 new PolarPanModifier(),
249 new PolarZoomExtentsModifier(),
250 new PolarMouseWheelZoomModifier(),
251 leftLegend,
252 rightLegend
253 );
254
255 // Map through all series and split them into the two legends
256 sciChartSurface.renderableSeries.asArray().forEach((rs, i) => {
257 if (i < TEMPERATURE_DATA.length / 2) {
258 leftLegend.includeSeries(rs, true);
259 } else {
260 rightLegend.includeSeries(rs, true);
261 }
262 });
263
264 return { sciChartSurface, wasmContext };
265};
266Multi Cycle Polar Line chart - Angular
Overview
This Angular example demonstrates a polar temperature chart using the ScichartAngularComponent. The standalone component displays 30 years of temperature data with Angular-specific integration patterns.
Technical Implementation
The chart is initialized by passing the drawExample function to the <scichart-angular> component. The implementation uses SciChartPolarSurface with Angular's change detection strategy. Temperature series are configured with PolarLineRenderableSeries and animated via EAnimationType.Sweep.
Features and Capabilities
The chart includes Angular-compatible interactivity with PolarZoomExtentsModifier and dual PolarLegendModifier instances. The EPolarAxisMode configuration ensures proper radial/angular axis alignment.
Integration and Best Practices
The example follows Angular standalone component best practices, with clean separation of chart logic. Developers can extend this by implementing Input() properties for dynamic data binding or adding NgZone optimization for performance-critical updates.
angular Chart Examples & Demos
See Also: Polar Charts (21 Demos)
Angular Polar Line Chart
Explore the React Polar Line Chart example to create data labels, line interpolation, gradient palette stroke and startup animations. Try the SciChart Demo.
Angular Polar Spline Line Chart
Try the Angular Polar Spline Line Chart example to see SciChart's GPU-accelerated rendering in action. Choose a cubic spline or polar interpolation. View demo.
Angular Polar Column Chart | Angular Polar Bar
Try the Angular Polar Bar Chart example to render bars in a polar layout with gradient fills and animations. Use SciChart for seamless integration.
Angular Polar Column Category Chart
Create an Angular Polar Colum Category chart visualizing UK consumer price changes. Try the demo with a custom positive/negative threshold fill and stroke.
Angular Polar Range Column Chart
Create an Angular Polar Range Column Chart with SciChart. This example displays monthly minimum and maximum temperatures within a Polar layout. Try the demo.
Angular Windrose Plot | Angular Polar Stacked Radial Column Chart
View the Angular Windrose Chart example to display directional data with stacked columns in a polar layout. Try the polar chart demo with customizable labels.
Angular Polar Sunburst Chart
See the Angular Sunburst Chart example with multiple levels, smooth animation transitions and dynamically updating segment colors. Try the SciChart demo.
Angular Polar Radial Column Chart
View the Angular Radial Column Chart example to see the difference that SciChart has to offer. Switch radial and angular axes and add interactive modifiers.
Angular Stacked Radial Column Chart | Stacked Radial Bar Chart
This Angular Stacked Radial Bar Chart example shows Olympic medal data by country. Try the demo for yourself with async initialization and theme application.
Angular Polar Area Chart | Polar Mountain Chart
The Angular Polar Area Chart example, also known as Nightingale Rose Chart, renders an area series with polar coordinates with interactive legend controls.
Angular Polar Stacked Radial Mountain Chart
Try the Angular Stacked Radial Mountain Chart example to show multiple datasets on a polar layout with a stacked mountain series and animated transitions.
Angular Polar Band | Polar Error Bands Chart
Create an Angular Polar Chart with regular and interpolated error bands. Enhance a standard chart with shaded areas to show upper and lower data boundaries.
Angular Polar Scatter Chart
Build a Angular Polar Scatter Chart with this example to render multiple scatter series on radial and angular axes. Try the flexible SciChart demo today.
Angular Polar Radar Chart
View the Angular Polar Radar Chart example. Also known as the Spider Radar Chart, view the scalability and stability that SciChart has to offer. Try demo.
Angular Gauge Charts
Create Angular Gauge Charts, including an Angular Circular Gauge Dashboard, with a friendly initialization and responsive design. Give the SciChart demo a go.
Angular Arc Gauge & FIFO Scrolling Charts Dashboard Example
View Angular Arc Gauge Charts alongside FIFO Scrolling Charts, all on the same dashboard with real-time, high-performance data rendering. Try the demo.
Angular Polar Uniform Heatmap Chart
Try SciChart's Angular Polar Heatmap example to combine a polar heatmap with a legend component. Supports responsive design and chart and legend separation.
Angular Polar Heatmap | B-Mode Image Ultrasound | Medical Heatmap
No description available for this example yet
Angular Polar Partial Arc
Create an Angular Polar Partial Arc that bends from a full Polar Circle to a Cartesian-like arc. Try the demo to display an arc segment with Polar coordinates.
Angular Polar Axis Label Modes
Create an Angular Polar Axis Label with SciChart. This demo shows the various label modes for Polar Axes – all optimised for pan, zoom, and mouse wheel.
Angular Polar Map Example
View the React Polar Map Example using the SciChartReact component. Display geographic data as color-coded triangles on a polar coordinate system. Try demo.