React Multi Cycle-Polar Line Example
Creates a React Multi Cycle Polar Line chart using the PolarLineRenderableSeries to show historical average surface temperatures by month.
drawExample.ts
index.tsx
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 - React
Overview
This React implementation showcases a polar temperature chart using the SciChart React component. It visualizes 30 years of monthly temperature data in a circular format with React-specific integration.
Technical Implementation
The chart is initialized via the initChart prop passed to <SciChartReact/>, creating a SciChartPolarSurface with polar axes. The component handles WASM context creation and cleanup automatically. Temperature series use PolarLineRenderableSeries with React-compatible animation via EAnimationType.
Features and Capabilities
The example features dual legends (PolarLegendModifier) for better data organization and interactive zoom/pan with PolarMouseWheelZoomModifier. Recent years (2019-2024) are highlighted using gradient strokes from PaletteFactory.
Integration and Best Practices
The implementation demonstrates proper React integration patterns, including theme usage via appTheme and efficient series rendering. Developers can extend this by adding React state management for dynamic data updates or customizing the ELegendPlacement options.
react Chart Examples & Demos
See Also: Polar Charts (21 Demos)
React 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.
React Polar Spline Line Chart
Try the React Polar Spline Line Chart example to see SciChart's GPU-accelerated rendering in action. Choose a cubic spline or polar interpolation. View demo.
React Polar Column | React Polar Bar
Try the React Polar Bar Chart example to render bars in a polar layout with gradient fills and animations. Use SciChart for seamless integration with React.
React Polar Column Category Chart
Create a React Polar Colum Category chart visualizing UK consumer price changes. Try the demo with a custom positive/negative threshold fill and stroke.
React Polar Range Column Chart
Create a React Polar Range Column Chart with SciChart. This example displays monthly minimum and maximum temperatures within a Polar layout. Try the demo.
React Windrose Plot | React Polar Stacked Radial Column Chart
View the React Windrose Chart example to display directional data with stacked columns in a polar layout. Try the polar chart demo with customizable labels.
React Polar Sunburst Chart
See the React Sunburst Chart example with multiple levels, smooth animation transitions and dynamically updating segment colors. Try the SciChart demo.
React Polar Radial Column Chart
View the React Radial Column Chart example to see the difference that SciChart has to offer. Switch radial and angular axes and add interactive modifiers.
React Stacked Radial Column Chart | Stacked Radial Bar Chart
This React Stacked Radial Bar Chart example shows Olympic medal data by country. Try the demo for yourself with async initialization and theme application.
React Polar Area Chart | Polar Mountain Chart
The React Polar Area Chart example, also known as Nightingale Rose Chart, renders an area series with polar coordinates with interactive legend controls.
React Polar Stacked Radial Mountain Chart
Try the React Stacked Radial Mountain Chart example to show multiple datasets on a polar layout with a stacked mountain series and animated transitions.
React Polar Band | Polar Error Bands Chart
Create a React Polar Chart with regular and interpolated error bands. Enhance a standard chart with shaded areas to show upper and lower data boundaries.
React Polar Scatter Chart
Build a React Polar Scatter Chart with this example to render multiple scatter series on radial and angular axes. Try the flexible SciChart demo today.
React Polar Radar Chart
View the React Polar Radar Chart example. Also known as the Spider Radar Chart, view the scalability and stability that SciChart has to offer. Try demo.
React Gauge Charts
Create React Gauge Charts, including a React Circular Gauge Dashboard, with React-friendly initialization and responsive design. Give the SciChart demo a go.
React Arc Gauge & FIFO Scrolling Charts Dashboard Example
View React Arc Gauge Charts alongside FIFO Scrolling Charts, all on the same dashboard with real-time, high-performance data rendering. Try the demo.
React Polar Uniform Heatmap Chart
Try SciChart's React Polar Heatmap example to combine a polar heatmap with a legend component. Supports responsive design and chart and legend separation.
React Polar Heatmap | B-Mode Image Ultrasound | Medical Heatmap
No description available for this example yet
React Polar Partial Arc
Create a React 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.
React Polar Axis Label Modes
Create a React Polar Axis Label with SciChart. This demo shows the various label modes for Polar Axes – all optimised for pan, zoom, and mouse wheel.
React 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.