JavaScript Polar Modifiers | Polar Interactivity Modifiers Demo
This demo displays all of SciChart's Polar Chart Modifier types.
TIP: If the PolarZoomExtents modifier is on, just double-click to reset your zoom / rotation.
Polar Modifiers:
PolarZoomExtents
PolarMouseWheelZoom
PolarMouseWheelZoom [Pan]
PolarPan [Cartesian]
PolarPan [Polar]
PolarArcZoom
PolarCursor
PolarLegend
PolarDataPointSelection
drawExample.ts
index.html
vanilla.ts
theme.ts
1import {
2 EAxisAlignment,
3 EChart2DModifierType,
4 EPolarAxisMode,
5 EPolarLabelMode,
6 NumberRange,
7 PolarNumericAxis,
8 SciChartPolarSurface,
9 XyDataSeries,
10 PolarCursorModifier,
11 PolarDataPointSelectionModifier,
12 PolarArcZoomModifier,
13 PolarMouseWheelZoomModifier,
14 PolarPanModifier,
15 PolarLegendModifier,
16 PolarZoomExtentsModifier,
17 ECoordinateMode,
18 EVerticalAnchorPoint,
19 EHorizontalAnchorPoint,
20 NativeTextAnnotation,
21 EMultiLineAlignment,
22 PolarXyScatterRenderableSeries,
23 EPointMarkerType,
24 EActionType,
25 EPolarPanModifierPanMode,
26 DataPointSelectionPaletteProvider,
27 EllipsePointMarker,
28 TrianglePointMarker,
29} from "scichart";
30import { appTheme } from "../../../theme";
31
32export const POLAR_MODIFIER_INFO: Partial<Record<EChart2DModifierType, string>> = {
33 [EChart2DModifierType.PolarZoomExtents]:
34 "Double-click\nto reset the zoom at the original visible ranges.\n(pairs amazing with other modifiers)",
35 [EChart2DModifierType.PolarMouseWheelZoom]: "Zoom The Polar Chart\nusing the mouse wheel or touchpad",
36 [EChart2DModifierType.PolarMouseWheelZoom + " [Pan]"]: "Rotate The Polar Chart\nusing the mouse wheel or touchpad",
37 [EChart2DModifierType.PolarPan + " [Cartesian]"]: "Click and drag\nto pan the chart in Cartesian mode",
38 [EChart2DModifierType.PolarPan + " [Polar]"]: "Click and drag\nto pan the chart in Polar mode",
39 [EChart2DModifierType.PolarArcZoom]: "Click and drag\nto Cut into The Polar Chart using an Arc",
40 [EChart2DModifierType.PolarCursor]: "Hover the chart\nto see the X and Y values of the data point",
41 [EChart2DModifierType.PolarLegend]: "Appends a legend showing the data series names & colors",
42 [EChart2DModifierType.PolarDataPointSelection]: "Select data-points\nto change their state",
43};
44const STROKE = "#FFFFFF";
45
46export const drawExample = async (rootElement: string | HTMLDivElement) => {
47 const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
48 theme: appTheme.SciChartJsTheme,
49 });
50
51 const radialYAxis = new PolarNumericAxis(wasmContext, {
52 polarAxisMode: EPolarAxisMode.Radial,
53 axisAlignment: EAxisAlignment.Right,
54 visibleRange: new NumberRange(0, 6),
55 zoomExtentsToInitialRange: true,
56
57 drawMinorTickLines: false,
58 drawMajorTickLines: false,
59 drawMinorGridLines: false,
60 majorGridLineStyle: {
61 strokeThickness: 1,
62 },
63 startAngle: Math.PI / 2,
64 drawLabels: false, // no radial labels
65 });
66 sciChartSurface.yAxes.add(radialYAxis);
67
68 const polarXAxis = new PolarNumericAxis(wasmContext, {
69 polarAxisMode: EPolarAxisMode.Angular,
70 axisAlignment: EAxisAlignment.Top,
71 polarLabelMode: EPolarLabelMode.Parallel,
72 visibleRange: new NumberRange(0, 9),
73 startAngle: Math.PI / 2, // start at 12 o'clock
74 flippedCoordinates: true, // go clockwise
75 zoomExtentsToInitialRange: true,
76
77 drawMinorTickLines: false,
78 drawMajorTickLines: false,
79 drawMinorGridLines: false,
80
81 useNativeText: true,
82 labelPrecision: 0,
83 majorGridLineStyle: {
84 strokeThickness: 1,
85 },
86 });
87 sciChartSurface.xAxes.add(polarXAxis);
88
89 const polarColumn = new PolarXyScatterRenderableSeries(wasmContext, {
90 dataSeries: new XyDataSeries(wasmContext, {
91 xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
92 yValues: [2.6, 5.3, 3.5, 2.7, 4.8, 3.8, 5, 4.5, 3.5],
93 }),
94 pointMarker: new TrianglePointMarker(wasmContext, {
95 width: 14,
96 height: 12,
97 fill: "#FFFFFF00",
98 stroke: "#FFAA00",
99 strokeThickness: 2,
100 }),
101 paletteProvider: new DataPointSelectionPaletteProvider({
102 fill: "#FFFFFF",
103 stroke: "#00AA00",
104 }),
105 });
106 sciChartSurface.renderableSeries.add(polarColumn);
107
108 const detailTextAnnotation = new NativeTextAnnotation({
109 text: POLAR_MODIFIER_INFO[EChart2DModifierType.PolarMouseWheelZoom],
110 fontSize: 24,
111 xCoordinateMode: ECoordinateMode.Relative,
112 yCoordinateMode: ECoordinateMode.Relative,
113 x1: 0,
114 y1: 0,
115 verticalAnchorPoint: EVerticalAnchorPoint.Center,
116 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
117 multiLineAlignment: EMultiLineAlignment.Center,
118 lineSpacing: 5,
119 textColor: appTheme.TextColor,
120 });
121 sciChartSurface.annotations.add(detailTextAnnotation);
122
123 // define all modifiers
124 const PolarArcZoom = new PolarArcZoomModifier({
125 stroke: STROKE,
126 fill: STROKE + "20", // 15% opacity
127 strokeThickness: 3,
128 });
129 const PolarCursor = new PolarCursorModifier({
130 axisLabelStroke: STROKE,
131 axisLabelFill: appTheme.DarkIndigo,
132 tooltipTextStroke: STROKE,
133 lineColor: STROKE,
134 });
135 const PolarDataPointSelection = new PolarDataPointSelectionModifier({
136 allowDragSelect: true,
137 allowClickSelect: true,
138 selectionStroke: "#3388FF",
139 selectionFill: "#3388FF44",
140 onSelectionChanged: (args) => {
141 console.log("seriesSelectionModifier onSelectionChanged", args);
142 },
143 });
144 const PolarLegend = new PolarLegendModifier({
145 backgroundColor: appTheme.DarkIndigo,
146 textColor: STROKE,
147 });
148 const PolarMouseWheelZoom = new PolarMouseWheelZoomModifier({
149 defaultActionType: EActionType.Zoom,
150 });
151 const PolarMouseWheelZoomPAN = new PolarMouseWheelZoomModifier({
152 defaultActionType: EActionType.Pan,
153 });
154 const PolarPanCartesian = new PolarPanModifier({
155 primaryPanMode: EPolarPanModifierPanMode.Cartesian,
156 });
157 const PolarPanPolar = new PolarPanModifier({
158 primaryPanMode: EPolarPanModifierPanMode.PolarStartAngle,
159 });
160 const PolarZoomExtents = new PolarZoomExtentsModifier();
161
162 // add by default these 3 modifiers
163 sciChartSurface.chartModifiers.add(PolarZoomExtents, PolarPanCartesian, PolarMouseWheelZoom);
164
165 return {
166 sciChartSurface,
167 controls: {
168 toggleModifier: (modifier: EChart2DModifierType) => {
169 const modifierToAddOrRemove = () => {
170 switch (modifier) {
171 case EChart2DModifierType.PolarArcZoom:
172 return PolarArcZoom;
173 case EChart2DModifierType.PolarCursor:
174 return PolarCursor;
175 case EChart2DModifierType.PolarDataPointSelection:
176 return PolarDataPointSelection;
177 case EChart2DModifierType.PolarLegend:
178 return PolarLegend;
179
180 case EChart2DModifierType.PolarMouseWheelZoom:
181 return PolarMouseWheelZoom;
182 case EChart2DModifierType.PolarMouseWheelZoom + " [Pan]":
183 return PolarMouseWheelZoomPAN;
184
185 case EChart2DModifierType.PolarPan + " [Cartesian]":
186 return PolarPanCartesian;
187 case EChart2DModifierType.PolarPan + " [Polar]":
188 return PolarPanPolar;
189
190 case EChart2DModifierType.PolarZoomExtents:
191 return PolarZoomExtents;
192 default:
193 return undefined;
194 }
195 };
196
197 const newModifier = modifierToAddOrRemove();
198
199 if (sciChartSurface.chartModifiers.contains(newModifier)) {
200 sciChartSurface.chartModifiers.remove(newModifier, true);
201 detailTextAnnotation.text = "Select a modifier to see its info";
202 } else {
203 sciChartSurface.chartModifiers.add(newModifier);
204 detailTextAnnotation.text = POLAR_MODIFIER_INFO[modifier]; // update the text
205 }
206 },
207 },
208 };
209};
210Polar Modifiers Chart - JavaScript
Overview
This example demonstrates how to create an interactive Polar Chart with multiple modifiers using SciChart.js in JavaScript. The implementation showcases a polar scatter plot with triangle markers and various interactive tools like zooming, panning, and cursor tracking.
Technical Implementation
The chart is initialized using SciChartPolarSurface.create() with a radial PolarNumericAxis and angular PolarNumericAxis. The data is plotted using PolarXyScatterRenderableSeries with triangle point markers. The example implements seven polar modifiers: PolarArcZoomModifier, PolarCursorModifier, PolarDataPointSelectionModifier, PolarLegendModifier, PolarMouseWheelZoomModifier, PolarPanModifier, and PolarZoomExtentsModifier. These are added to the surface via chartModifiers.add().
Features and Capabilities
The chart features dynamic modifier toggling with conflict detection between incompatible modifiers like pan and arc zoom. It includes a central text annotation that updates to show instructions for the active modifier. The polar axes are configured with custom styling including grid lines and start angles for radial orientation.
Integration and Best Practices
The implementation follows JavaScript best practices with async initialization and proper resource cleanup. Developers can extend this example by adding more series types or customizing the modifier behaviors further.
javascript Chart Examples & Demos
See Also: Zoom and Pan a Chart (9 Demos)
JavaScript Chart with Multiple X Axes
Demonstrates Multiple X & Y Axis on a JavaScript Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning
JavaScript Chart with Secondary Y Axes
Demonstrates Secondary Y Axis on a JavaScript Chart using SciChart.js. SciChart supports unlimited, multiple left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning
Drag JavaScript Chart Axis to Scale or Pan
Demonstrates how to Zoom, Scale or Pan individual Axis on a JavaScript Chart with SciChart.js AxisDragModifiers
Zoom and Pan a Realtime JavaScript Chart
Demonstrates how to zoom and pan a realtime JavaScript Chart while it is updating, with SciChart.js ZoomState API
Zoom and Pan with JavaScript Chart multiple Modifiers
Demonstrates how to use multiple Zoom and Pan Modifiers on a JavaScript Chart with SciChart.js
Zoom and Pan with Overview Chart
Demonstrates how to zoom and pan with an Overview Chart
Virtualized JavaScript Charts: Load Data on Zoom/Pan
shows how to load data on zoom/pan and how to create an overview chart for this case.
High Precision Date Axis
Demonstrates 64-bit precision Date Axis in SciChart.js handling Nanoseconds to Billions of Years
JavaScript Overview for SubCharts with Range Selection
Demonstrates how to create multiple synchronized subcharts with an overview range selector using SciChart.js and SubSurfaces