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 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 - 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.