React Polar Partial Arc
Creates a React Polar Partial Arc using SciChart.js, which can bend from a full Polar Circle, all the way to a cartesian-like arc.
Inner Radius: 0.998
Total Angle: 0.001 * π or 0.004
drawExample.ts
index.tsx
theme.ts
1import {
2 SciChartPolarSurface,
3 PolarMouseWheelZoomModifier,
4 PolarZoomExtentsModifier,
5 PolarPanModifier,
6 XyDataSeries,
7 PolarLineRenderableSeries,
8 EllipsePointMarker,
9 PolarNumericAxis,
10 EPolarAxisMode,
11 EPolarLabelMode,
12 EAxisAlignment,
13 EXyDirection,
14 GenericAnimation,
15 easing,
16 NumberRange,
17 EActionType,
18} from "scichart";
19import { appTheme } from "../../../theme";
20
21/**
22 * Calculate inner radius for the angle to fit nicely into 3 x 2 aspect ratio canvas.
23 * Use it for fraction less than 1/4 (quarter of the circle)
24 */
25const calcRadiusFromAngleFraction = (angleFraction: number) => {
26 const totalAngle = 2 * Math.PI * angleFraction;
27 const halfAngle = totalAngle / 2;
28 return (1 - (4 / 3) * Math.sin(halfAngle)) / Math.cos(halfAngle);
29};
30
31export const drawExample = async (
32 rootElement: string | HTMLDivElement,
33 innerRadius: number,
34 totalAngle: number,
35 onAnimationUpdate?: (values: { innerRadius: number; totalAngle: number }) => void
36) => {
37 const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
38 theme: appTheme.SciChartJsTheme,
39 });
40
41 // Add axes
42 const radialYAxis = new PolarNumericAxis(wasmContext, {
43 polarAxisMode: EPolarAxisMode.Radial,
44 axisAlignment: EAxisAlignment.Right,
45 drawMinorGridLines: false,
46 useNativeText: true,
47 drawLabels: true,
48 labelPrecision: 0,
49
50 majorGridLineStyle: {
51 color: "gray",
52 strokeThickness: 1,
53 },
54 isInnerAxis: true,
55 visibleRange: new NumberRange(0, 10),
56 zoomExtentsToInitialRange: true,
57
58 innerRadius: innerRadius,
59 startAngle: Math.PI / 2,
60 });
61 sciChartSurface.yAxes.add(radialYAxis);
62
63 const angularXAxis = new PolarNumericAxis(wasmContext, {
64 polarAxisMode: EPolarAxisMode.Angular,
65 polarLabelMode: EPolarLabelMode.Parallel,
66 axisAlignment: EAxisAlignment.Top,
67 labelPrecision: 0,
68
69 flippedCoordinates: true,
70 drawMinorGridLines: false,
71 useNativeText: true,
72
73 majorGridLineStyle: {
74 color: "gray",
75 strokeThickness: 1,
76 },
77
78 totalAngle,
79 startAngle: Math.PI / 2,
80 });
81 sciChartSurface.xAxes.add(angularXAxis);
82
83 // Add a basic line series to better visualize the polar chart
84 const PETAL_NUMBER = 6;
85 const POINTS_PER_PETAL = 100;
86
87 const polarlineSeries = new PolarLineRenderableSeries(wasmContext, {
88 dataSeries: new XyDataSeries(wasmContext, {
89 xValues: Array.from({ length: PETAL_NUMBER * POINTS_PER_PETAL + 1 }, (_, i) => i / POINTS_PER_PETAL),
90 yValues: Array.from({ length: PETAL_NUMBER * POINTS_PER_PETAL + 1 }, (_, i) => {
91 const angleFraction = i / (PETAL_NUMBER * POINTS_PER_PETAL);
92 return 5 + 5 * Math.sin(2 * Math.PI * angleFraction * PETAL_NUMBER);
93 }),
94 }),
95 stroke: appTheme.VividOrange,
96 interpolateLine: true,
97 strokeThickness: 3,
98 pointMarker: new EllipsePointMarker(wasmContext, {
99 width: 8,
100 height: 8,
101 stroke: appTheme.VividOrange,
102 fill: appTheme.DarkIndigo,
103 }),
104 });
105 sciChartSurface.renderableSeries.add(polarlineSeries);
106
107 // customize `zoomExtents` modifier to update frontend sliders via Callback
108 const zoomExtentsMod = new PolarZoomExtentsModifier();
109 zoomExtentsMod.animationDuration = 200;
110 zoomExtentsMod.onZoomExtents = (sciChartSurface) => {
111 setTimeout(() => {
112 onAnimationUpdate({
113 innerRadius: radialYAxis.innerRadius,
114 totalAngle: angularXAxis.totalAngle,
115 });
116 }, 200); // wait for `zoomExtents` animation to complete
117 return true;
118 };
119
120 sciChartSurface.chartModifiers.add(
121 new PolarPanModifier({ xyDirection: EXyDirection.XDirection }),
122 new PolarMouseWheelZoomModifier({ defaultActionType: EActionType.Pan }),
123
124 // Customise `zoomExtents` modifier to update frontend sliders via `onAnimationUpdate` Callback
125 new PolarZoomExtentsModifier({
126 animationDuration: 200,
127 onZoomExtents: (sciChartSurface) => {
128 setTimeout(() => {
129 onAnimationUpdate({
130 innerRadius: radialYAxis.innerRadius,
131 totalAngle: angularXAxis.totalAngle,
132 });
133 }, 200); // wait for animation to complete
134 return true;
135 },
136 })
137 );
138
139 // Animation which animates a polar surface to look like a Cartesian coordinate system for better understanding
140 type polarAnimationOptions = {
141 angleFraction: number;
142 startAngle: number;
143 radius: number;
144 };
145
146 const animateAll = (from: polarAnimationOptions, to: polarAnimationOptions, progress: number) => {
147 const angleFractionQuarter$ = 1 / 4;
148 const totalAngleQuarter$ = 2 * Math.PI * angleFractionQuarter$;
149 const beta$ = totalAngleQuarter$ / 2;
150 const radius4quarter$ = (1 - (4 / 3) * Math.sin(beta$)) / Math.cos(beta$);
151 const startAngleQuarter$ = totalAngleQuarter$ - totalAngleQuarter$ / 2;
152
153 const curFraction$ = from.angleFraction + (to.angleFraction - from.angleFraction) * progress;
154 const curTotalAngle$ = 2 * Math.PI * curFraction$;
155 angularXAxis.totalAngle = curTotalAngle$;
156 const isAFIncreasing$ = to.angleFraction - from.angleFraction > 0;
157 if (isAFIncreasing$) {
158 if (curFraction$ < angleFractionQuarter$) {
159 const progress$ = (curFraction$ - from.angleFraction) / (angleFractionQuarter$ - from.angleFraction);
160 const radius$ = calcRadiusFromAngleFraction(curFraction$);
161 radialYAxis.innerRadius = radius$;
162 const curSA$ = from.startAngle + (startAngleQuarter$ - from.startAngle) * progress$;
163 angularXAxis.startAngle = curSA$;
164 radialYAxis.startAngle = curSA$;
165 } else {
166 const progress$ = (curFraction$ - angleFractionQuarter$) / (to.angleFraction - angleFractionQuarter$);
167 const radius$ = radius4quarter$ + (to.radius - radius4quarter$) * progress$;
168 radialYAxis.innerRadius = radius$;
169 const curSA$ = startAngleQuarter$ + (to.startAngle - startAngleQuarter$) * progress$;
170 angularXAxis.startAngle = curSA$;
171 radialYAxis.startAngle = curSA$;
172 }
173 } else {
174 if (curFraction$ > angleFractionQuarter$) {
175 const progress$ = (from.angleFraction - curFraction$) / (from.angleFraction - angleFractionQuarter$);
176 const radius$ = from.radius + (radius4quarter$ - from.radius) * progress$;
177 radialYAxis.innerRadius = radius$;
178 const curSA$ = from.startAngle + (startAngleQuarter$ - from.startAngle) * progress$;
179 angularXAxis.startAngle = curSA$;
180 radialYAxis.startAngle = curSA$;
181 } else {
182 const progress$ = (angleFractionQuarter$ - curFraction$) / (angleFractionQuarter$ - to.angleFraction);
183 const radius$ = calcRadiusFromAngleFraction(curFraction$);
184 radialYAxis.innerRadius = radius$;
185 const curSA$ = startAngleQuarter$ + (to.startAngle - startAngleQuarter$) * progress$;
186 angularXAxis.startAngle = curSA$;
187 radialYAxis.startAngle = curSA$;
188 }
189 }
190
191 if (onAnimationUpdate) {
192 onAnimationUpdate({
193 innerRadius: radialYAxis.innerRadius,
194 totalAngle: angularXAxis.totalAngle,
195 });
196 }
197 };
198
199 const allAnimation = new GenericAnimation<polarAnimationOptions>({
200 from: { angleFraction: 0.0006, startAngle: Math.PI / 2, radius: 0.998 },
201 to: { angleFraction: 1, startAngle: 0, radius: 0 },
202 onAnimate: animateAll,
203 delay: 1000,
204 duration: 2000,
205 ease: easing.linear,
206 onCompleted: () => {
207 const tmp = allAnimation.from;
208 allAnimation.from = allAnimation.to;
209 allAnimation.to = tmp;
210 allAnimation.reset();
211 },
212 });
213
214 return {
215 sciChartSurface,
216 wasmContext,
217 controls: {
218 startAnimation: () => {
219 allAnimation.reset();
220 sciChartSurface.addAnimation(allAnimation);
221 },
222 endAnimation: () => {
223 sciChartSurface.getAnimations().forEach((a) => a.cancel());
224 },
225 changeInnerRadiusInternal: (value: number) => {
226 radialYAxis.innerRadius = value;
227 },
228 changeTotalAngleInternal: (value: number) => {
229 angularXAxis.totalAngle = value;
230 },
231 },
232 };
233};
234Polar Partial Arc Chart - React
Overview
This React example demonstrates a partial polar chart using SciChart.js, configured through the SciChart React component. The chart displays a small arc segment of polar coordinates, visually resembling Cartesian axes.
Technical Implementation
The chart is initialized via an initChart function passed to SciChartReact, creating a SciChartPolarSurface with customized PolarNumericAxis instances. The example includes interactive modifiers and animations that update component state through callbacks.
Features and Capabilities
The implementation features dynamic control over polar chart parameters, smooth animated transitions between view states, and real-time updates to React state. The PolarLineRenderableSeries demonstrates efficient rendering of polar data.
Integration and Best Practices
This example follows React best practices by managing chart lifecycle through the SciChartReact component and demonstrating proper cleanup. For more complex implementations, refer to the React integration guide.
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 Multi Cycle-Polar Line Example
Create a React Multi-Cycle Polar Chart to plot data over multiple cycles and visualize patterns over time. This example shows surface temperature by month.
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 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.