JavaScript Multi Cycle-Polar Line Example
Creates a JavaScript Multi Cycle Polar Line chart using the PolarLineRenderableSeries to show historical average surface temperatures by month.
drawExample.ts
index.html
vanilla.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 ELegendPlacement,
17 SweepAnimation,
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: appTheme.TextColor,
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 // The palette provider overrides the stroke when drawing, but the legend swatch
207 // reads stroke - so set it to the warm end of the gradient to keep the two in step
208 stroke: appTheme.VividPink,
209 strokeThickness: 3,
210 }
211 : {
212 // Cool slate-to-purple ramp for the older years. Keep the floor light enough
213 // to stay visible against the dark themes' near-black background
214 stroke: `rgba(${60 + i * 2}, ${70 + i}, ${110 + i * 2}, 1)`,
215 strokeThickness: 2,
216 }),
217
218 seriesName: `${YEARS[i]}`,
219 animation: new SweepAnimation({
220 duration: 300,
221 delay: 100 * i,
222 }),
223 clipToTotalAngle: true,
224 dataSeries: new XyDataSeries(wasmContext, {
225 xValues: xValues,
226 yValues: [
227 ...TEMPERATURE_DATA[i],
228 TEMPERATURE_DATA[i + 1] ? TEMPERATURE_DATA[i + 1][0] : TEMPERATURE_DATA[i][11],
229 ],
230 }),
231 })
232 );
233 }
234
235 // A light panel with dark text, so the muted series swatches read against every app theme
236 const legendOptions = {
237 showCheckboxes: true,
238 backgroundColor: "rgba(225, 228, 235, 0.92)",
239 textColor: appTheme.DarkIndigo,
240 };
241
242 // split half of the years into two legends
243 const leftLegend = new PolarLegendModifier({
244 ...legendOptions,
245 placement: ELegendPlacement.TopLeft,
246 });
247
248 const rightLegend = new PolarLegendModifier({
249 ...legendOptions,
250 placement: ELegendPlacement.TopRight,
251 });
252
253 // Add modifiers
254 sciChartSurface.chartModifiers.add(
255 new PolarPanModifier(),
256 new PolarZoomExtentsModifier(),
257 new PolarMouseWheelZoomModifier(),
258 leftLegend,
259 rightLegend
260 );
261
262 // Map through all series and split them into the two legends
263 sciChartSurface.renderableSeries.asArray().forEach((rs, i) => {
264 if (i < TEMPERATURE_DATA.length / 2) {
265 leftLegend.includeSeries(rs, true);
266 } else {
267 rightLegend.includeSeries(rs, true);
268 }
269 });
270
271 return { sciChartSurface, wasmContext };
272};
273Multi Cycle Polar Line chart - JavaScript
Overview
This example demonstrates how to create a Polar Line Chart visualizing 30 years of temperature data using SciChart.js. The chart displays monthly temperature variations in a circular layout, with the last 5 years highlighted using a gradient effect.
Technical Implementation
The chart uses SciChartPolarSurface with PolarNumericAxis for radial values and PolarCategoryAxis for angular months. Temperature data is plotted using PolarLineRenderableSeries with XyDataSeries. The implementation features SweepAnimation for smooth transitions and PaletteFactory for gradient highlighting.
Features and Capabilities
The chart includes interactive modifiers like PolarZoomExtentsModifier and PolarPanModifier, with data split across two PolarLegendModifier instances for better readability. The radial axis is configured with temperature ranges (12-17°C) and angular axis shows months.
Integration and Best Practices
The example follows best practices for async initialization and cleanup. Developers can extend this by adding real-time updates or customizing the EPolarAxisMode settings for different polar chart variations.
javascript Chart Examples & Demos
See Also: Polar Charts (21 Demos)
JavaScript 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.
JavaScript Polar Spline Line Chart
Try the JavaScript Polar Spline Line Chart example to see SciChart's GPU-accelerated rendering in action. Choose a cubic spline or polar interpolation. View demo.
JavaScript Polar Column | Polar Bar
Try the JavaScript Polar Column or Bar Chart example to render bars in a polar layout with gradient fills and animations. Use SciChart for seamless integrations.
JavaScript Polar Column Category Chart
Create a JavaScript Polar Colum Category chart visualizing UK consumer price changes. Try the demo with a custom positive/negative threshold fill and stroke.
JavaScript Polar Range Column Chart
Create a JavaScript Polar Range Column Chart with SciChart. This example displays monthly minimum and maximum temperatures within a Polar layout. Try the demo.
JavaScript Windrose Plot | Polar Stacked Radial Column Chart
View the JavaScript Windrose Chart example to display directional data with stacked columns in a polar layout. Try the polar chart demo with customizable labels
JavaScript Polar Sunburst Chart
See the JavaScript Sunburst Chart example with multiple levels, smooth animation transitions and dynamically updating segment colors. Try the SciChart demo.
JavaScript Polar Radial Column Chart
View the JavaScript Radial Column Chart example to see the difference that SciChart has to offer. Switch radial and angular axes and add interactive modifiers.
JavaScript Stacked Radial Column Chart | Stacked Radial Bar Chart
This JavaScript Stacked Radial Bar Chart example shows Olympic medal data by country. Try the demo for yourself with async initialization and theme application.
JavaScript Polar Area Chart | Polar Mountain Chart
The JavaScript Polar Area Chart example, also known as Nightingale Rose Chart, renders an area series with polar coordinates with interactive legend controls.
JavaScript Polar Stacked Radial Mountain Chart
Try the JavaScript Stacked Radial Mountain Chart example to show multiple datasets on a polar layout with a stacked mountain series and animated transitions.
JavaScript Polar Band | Polar Error Bands Chart
Create a JavaScript Polar Chart with regular and interpolated error bands. Enhance a standard chart with shaded areas to show upper and lower data boundaries.
JavaScript Polar Scatter Chart
Build a JavaScript Polar Scatter Chart with this example to render multiple scatter series on radial and angular axes. Try the flexible SciChart demo today.
JavaScript Polar Radar Chart
View the JavaScript Polar Radar Chart example. Also known as the Spider Radar Chart, view the scalability and stability that SciChart has to offer. Try demo.
JavaScript Gauge Charts
Create JavaScript Gauge Charts, including a JavaScript Circular Gauge Dashboard, with user-friendly initialization and responsive design. Give SciChart a go.
JavaScript Arc Gauge & FIFO Scrolling Charts Dashboard Example
View JavaScript Arc Gauge Charts alongside FIFO Scrolling Charts, all on the same dashboard with real-time, high-performance data rendering. Try the demo.
JavaScript Polar Uniform Heatmap Chart
Try SciChart's JavaScript Polar Heatmap example to combine a polar heatmap with a legend component. Supports responsive design and chart and legend separation.
JavaScript Polar Heatmap | B-Mode Image Ultrasound | Medical Heatmap
No description available for this example yet
JavaScript Polar Partial Arc
Create a JavaScript 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.
JavaScript Polar Axis Label Modes
Create a JavaScript Polar Axis Label with SciChart. This demo shows the various label modes for Polar Axes – all optimised for pan, zoom, and mouse wheel.
JavaScript 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.