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 isInnerAxis: true,
51 visibleRange: new NumberRange(0, 10),
52 zoomExtentsToInitialRange: true,
53
54 innerRadius: innerRadius,
55 startAngle: Math.PI / 2,
56 });
57 sciChartSurface.yAxes.add(radialYAxis);
58
59 const angularXAxis = new PolarNumericAxis(wasmContext, {
60 polarAxisMode: EPolarAxisMode.Angular,
61 polarLabelMode: EPolarLabelMode.Parallel,
62 axisAlignment: EAxisAlignment.Top,
63 labelPrecision: 0,
64
65 flippedCoordinates: true,
66 drawMinorGridLines: false,
67 useNativeText: true,
68
69 totalAngle,
70 startAngle: Math.PI / 2,
71 });
72 sciChartSurface.xAxes.add(angularXAxis);
73
74 // Add a basic line series to better visualize the polar chart
75 const PETAL_NUMBER = 6;
76 const POINTS_PER_PETAL = 100;
77
78 const polarlineSeries = new PolarLineRenderableSeries(wasmContext, {
79 dataSeries: new XyDataSeries(wasmContext, {
80 xValues: Array.from({ length: PETAL_NUMBER * POINTS_PER_PETAL + 1 }, (_, i) => i / POINTS_PER_PETAL),
81 yValues: Array.from({ length: PETAL_NUMBER * POINTS_PER_PETAL + 1 }, (_, i) => {
82 const angleFraction = i / (PETAL_NUMBER * POINTS_PER_PETAL);
83 return 5 + 5 * Math.sin(2 * Math.PI * angleFraction * PETAL_NUMBER);
84 }),
85 }),
86 stroke: appTheme.VividOrange,
87 interpolateLine: true,
88 strokeThickness: 3,
89 pointMarker: new EllipsePointMarker(wasmContext, {
90 width: 8,
91 height: 8,
92 stroke: appTheme.VividOrange,
93 fill: appTheme.Background,
94 }),
95 });
96 sciChartSurface.renderableSeries.add(polarlineSeries);
97
98 // customize `zoomExtents` modifier to update frontend sliders via Callback
99 const zoomExtentsMod = new PolarZoomExtentsModifier();
100 zoomExtentsMod.animationDuration = 200;
101 zoomExtentsMod.onZoomExtents = (sciChartSurface) => {
102 setTimeout(() => {
103 onAnimationUpdate({
104 innerRadius: radialYAxis.innerRadius,
105 totalAngle: angularXAxis.totalAngle,
106 });
107 }, 200); // wait for `zoomExtents` animation to complete
108 return true;
109 };
110
111 sciChartSurface.chartModifiers.add(
112 new PolarPanModifier({ xyDirection: EXyDirection.XDirection }),
113 new PolarMouseWheelZoomModifier({ defaultActionType: EActionType.Pan }),
114
115 // Customise `zoomExtents` modifier to update frontend sliders via `onAnimationUpdate` Callback
116 new PolarZoomExtentsModifier({
117 animationDuration: 200,
118 onZoomExtents: (sciChartSurface) => {
119 setTimeout(() => {
120 onAnimationUpdate({
121 innerRadius: radialYAxis.innerRadius,
122 totalAngle: angularXAxis.totalAngle,
123 });
124 }, 200); // wait for animation to complete
125 return true;
126 },
127 })
128 );
129
130 // Animation which animates a polar surface to look like a Cartesian coordinate system for better understanding
131 type polarAnimationOptions = {
132 angleFraction: number;
133 startAngle: number;
134 radius: number;
135 };
136
137 const animateAll = (from: polarAnimationOptions, to: polarAnimationOptions, progress: number) => {
138 const angleFractionQuarter$ = 1 / 4;
139 const totalAngleQuarter$ = 2 * Math.PI * angleFractionQuarter$;
140 const beta$ = totalAngleQuarter$ / 2;
141 const radius4quarter$ = (1 - (4 / 3) * Math.sin(beta$)) / Math.cos(beta$);
142 const startAngleQuarter$ = totalAngleQuarter$ - totalAngleQuarter$ / 2;
143
144 const curFraction$ = from.angleFraction + (to.angleFraction - from.angleFraction) * progress;
145 const curTotalAngle$ = 2 * Math.PI * curFraction$;
146 angularXAxis.totalAngle = curTotalAngle$;
147 const isAFIncreasing$ = to.angleFraction - from.angleFraction > 0;
148 if (isAFIncreasing$) {
149 if (curFraction$ < angleFractionQuarter$) {
150 const progress$ = (curFraction$ - from.angleFraction) / (angleFractionQuarter$ - from.angleFraction);
151 const radius$ = calcRadiusFromAngleFraction(curFraction$);
152 radialYAxis.innerRadius = radius$;
153 const curSA$ = from.startAngle + (startAngleQuarter$ - from.startAngle) * progress$;
154 angularXAxis.startAngle = curSA$;
155 radialYAxis.startAngle = curSA$;
156 } else {
157 const progress$ = (curFraction$ - angleFractionQuarter$) / (to.angleFraction - angleFractionQuarter$);
158 const radius$ = radius4quarter$ + (to.radius - radius4quarter$) * progress$;
159 radialYAxis.innerRadius = radius$;
160 const curSA$ = startAngleQuarter$ + (to.startAngle - startAngleQuarter$) * progress$;
161 angularXAxis.startAngle = curSA$;
162 radialYAxis.startAngle = curSA$;
163 }
164 } else {
165 if (curFraction$ > angleFractionQuarter$) {
166 const progress$ = (from.angleFraction - curFraction$) / (from.angleFraction - angleFractionQuarter$);
167 const radius$ = from.radius + (radius4quarter$ - from.radius) * progress$;
168 radialYAxis.innerRadius = radius$;
169 const curSA$ = from.startAngle + (startAngleQuarter$ - from.startAngle) * progress$;
170 angularXAxis.startAngle = curSA$;
171 radialYAxis.startAngle = curSA$;
172 } else {
173 const progress$ = (angleFractionQuarter$ - curFraction$) / (angleFractionQuarter$ - to.angleFraction);
174 const radius$ = calcRadiusFromAngleFraction(curFraction$);
175 radialYAxis.innerRadius = radius$;
176 const curSA$ = startAngleQuarter$ + (to.startAngle - startAngleQuarter$) * progress$;
177 angularXAxis.startAngle = curSA$;
178 radialYAxis.startAngle = curSA$;
179 }
180 }
181
182 if (onAnimationUpdate) {
183 onAnimationUpdate({
184 innerRadius: radialYAxis.innerRadius,
185 totalAngle: angularXAxis.totalAngle,
186 });
187 }
188 };
189
190 const allAnimation = new GenericAnimation<polarAnimationOptions>({
191 from: { angleFraction: 0.0006, startAngle: Math.PI / 2, radius: 0.998 },
192 to: { angleFraction: 1, startAngle: 0, radius: 0 },
193 onAnimate: animateAll,
194 delay: 1000,
195 duration: 2000,
196 ease: easing.linear,
197 onCompleted: () => {
198 const tmp = allAnimation.from;
199 allAnimation.from = allAnimation.to;
200 allAnimation.to = tmp;
201 allAnimation.reset();
202 },
203 });
204
205 return {
206 sciChartSurface,
207 wasmContext,
208 controls: {
209 startAnimation: () => {
210 allAnimation.reset();
211 sciChartSurface.addAnimation(allAnimation);
212 },
213 endAnimation: () => {
214 sciChartSurface.getAnimations().forEach((a) => a.cancel());
215 },
216 changeInnerRadiusInternal: (value: number) => {
217 radialYAxis.innerRadius = value;
218 },
219 changeTotalAngleInternal: (value: number) => {
220 angularXAxis.totalAngle = value;
221 },
222 },
223 };
224};
225Polar 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.