JavaScript Polar Partial Arc
Creates a JavaScript 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.html
vanilla.ts
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 - JavaScript
Overview
This example demonstrates how to create a partial polar chart in JavaScript using SciChart.js, where the polar coordinate system is configured to display only a small arc segment. The chart mimics Cartesian coordinates by setting extreme values for innerRadius and totalAngle properties.
Technical Implementation
The implementation uses SciChartPolarSurface.create() to initialize the chart with radial and angular axes. A PolarLineRenderableSeries displays petal-shaped data, while modifiers like PolarZoomExtentsModifier enable interactivity. The animation transitions between partial and full polar views using GenericAnimation.
Features and Capabilities
Key features include dynamic adjustment of polar chart parameters, smooth animations between view states, and interactive zoom/pan behavior. The example showcases how polar charts can visually approximate Cartesian coordinates when configured with specific axis properties.
Integration and Best Practices
The implementation follows best practices for asynchronous chart initialization and proper resource cleanup. Developers can extend this example by incorporating real-time data updates or additional polar series types as described in the Polar Chart documentation.
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 Multi Cycle-Polar Line Example
Create a JavaScript Multi-Cycle Polar Chart to plot data over multiple cycles and visualize patterns over time. This example shows surface temperature by month.
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 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.