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]: "Double-click\nto reset the zoom at the original visible ranges.\n(pairs amazing with other modifiers)",
34 [EChart2DModifierType.PolarMouseWheelZoom]: "Zoom The Polar Chart\nusing the mouse wheel or touchpad",
35 [EChart2DModifierType.PolarMouseWheelZoom + " [Pan]"]: "Rotate The Polar Chart\nusing the mouse wheel or touchpad",
36 [EChart2DModifierType.PolarPan + " [Cartesian]"]: "Click and drag\nto pan the chart in Cartesian mode",
37 [EChart2DModifierType.PolarPan + " [Polar]"]: "Click and drag\nto pan the chart in Polar mode",
38 [EChart2DModifierType.PolarArcZoom]: "Click and drag\nto Cut into The Polar Chart using an Arc",
39 [EChart2DModifierType.PolarCursor]: "Hover the chart\nto see the X and Y values of the data point",
40 [EChart2DModifierType.PolarLegend]: "Appends a legend showing the data series names & colors",
41 [EChart2DModifierType.PolarDataPointSelection]: "Select data-points\nto change their state",
42};
43const STROKE = "#FFFFFF";
44
45export const drawExample = async (rootElement: string | HTMLDivElement) => {
46 const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
47 theme: appTheme.SciChartJsTheme,
48 });
49
50 const radialYAxis = new PolarNumericAxis(wasmContext, {
51 polarAxisMode: EPolarAxisMode.Radial,
52 axisAlignment: EAxisAlignment.Right,
53 visibleRange: new NumberRange(0, 6),
54 zoomExtentsToInitialRange: true,
55
56 drawMinorTickLines: false,
57 drawMajorTickLines: false,
58 drawMinorGridLines: false,
59 majorGridLineStyle: {
60 strokeThickness: 1,
61 },
62 startAngle: Math.PI / 2,
63 drawLabels: false, // no radial labels
64 });
65 sciChartSurface.yAxes.add(radialYAxis);
66
67 const polarXAxis = new PolarNumericAxis(wasmContext, {
68 polarAxisMode: EPolarAxisMode.Angular,
69 axisAlignment: EAxisAlignment.Top,
70 polarLabelMode: EPolarLabelMode.Parallel,
71 visibleRange: new NumberRange(0, 9),
72 startAngle: Math.PI / 2, // start at 12 o'clock
73 flippedCoordinates: true, // go clockwise
74 zoomExtentsToInitialRange: true,
75
76 drawMinorTickLines: false,
77 drawMajorTickLines: false,
78 drawMinorGridLines: false,
79
80 useNativeText: true,
81 labelPrecision: 0,
82 majorGridLineStyle: {
83 strokeThickness: 1,
84 },
85 });
86 sciChartSurface.xAxes.add(polarXAxis);
87
88 const polarColumn = new PolarXyScatterRenderableSeries(wasmContext, {
89 dataSeries: new XyDataSeries(wasmContext, {
90 xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
91 yValues: [2.6, 5.3, 3.5, 2.7, 4.8, 3.8, 5, 4.5, 3.5],
92 }),
93 pointMarker: new TrianglePointMarker(wasmContext, {
94 width: 14,
95 height: 12,
96 fill: "#FFFFFF00",
97 stroke: "#FFAA00",
98 strokeThickness: 2,
99 }),
100 paletteProvider: new DataPointSelectionPaletteProvider({
101 fill: "#FFFFFF",
102 stroke: "#00AA00",
103 })
104 });
105 sciChartSurface.renderableSeries.add(polarColumn);
106
107 const detailTextAnnotation = new NativeTextAnnotation({
108 text: POLAR_MODIFIER_INFO[EChart2DModifierType.PolarMouseWheelZoom],
109 fontSize: 24,
110 xCoordinateMode: ECoordinateMode.Relative,
111 yCoordinateMode: ECoordinateMode.Relative,
112 x1: 0,
113 y1: 0,
114 verticalAnchorPoint: EVerticalAnchorPoint.Center,
115 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
116 multiLineAlignment: EMultiLineAlignment.Center,
117 lineSpacing: 5,
118 textColor: appTheme.TextColor
119 });
120 sciChartSurface.annotations.add(detailTextAnnotation);
121
122 // define all modifiers
123 const PolarArcZoom = new PolarArcZoomModifier({
124 stroke: STROKE,
125 fill: STROKE + "20", // 15% opacity
126 strokeThickness: 3,
127 });
128 const PolarCursor = new PolarCursorModifier({
129 axisLabelStroke: STROKE,
130 axisLabelFill: appTheme.DarkIndigo,
131 tooltipTextStroke: STROKE,
132 lineColor: STROKE,
133 });
134 const PolarDataPointSelection = new PolarDataPointSelectionModifier({
135 allowDragSelect: true,
136 allowClickSelect: true,
137 selectionStroke: "#3388FF",
138 selectionFill: "#3388FF44",
139 onSelectionChanged: (args) => {
140 console.log("seriesSelectionModifier onSelectionChanged", args);
141 },
142 });
143 const PolarLegend = new PolarLegendModifier({
144 backgroundColor: appTheme.DarkIndigo,
145 textColor: STROKE,
146 });
147 const PolarMouseWheelZoom = new PolarMouseWheelZoomModifier({
148 defaultActionType: EActionType.Zoom
149 });
150 const PolarMouseWheelZoomPAN = new PolarMouseWheelZoomModifier({
151 defaultActionType: EActionType.Pan
152 });
153 const PolarPanCartesian = new PolarPanModifier({
154 primaryPanMode: EPolarPanModifierPanMode.Cartesian,
155 });
156 const PolarPanPolar = new PolarPanModifier({
157 primaryPanMode: EPolarPanModifierPanMode.PolarStartAngle,
158 });
159 const PolarZoomExtents = new PolarZoomExtentsModifier();
160
161 // add by default these 3 modifiers
162 sciChartSurface.chartModifiers.add(PolarZoomExtents, PolarPanCartesian, PolarMouseWheelZoom);
163
164 return {
165 sciChartSurface,
166 controls: {
167 toggleModifier: (modifier: EChart2DModifierType) => {
168 const modifierToAddOrRemove = () => {
169 switch (modifier) {
170 case EChart2DModifierType.PolarArcZoom:
171 return PolarArcZoom;
172 case EChart2DModifierType.PolarCursor:
173 return PolarCursor;
174 case EChart2DModifierType.PolarDataPointSelection:
175 return PolarDataPointSelection;
176 case EChart2DModifierType.PolarLegend:
177 return PolarLegend;
178
179 case EChart2DModifierType.PolarMouseWheelZoom:
180 return PolarMouseWheelZoom;
181 case EChart2DModifierType.PolarMouseWheelZoom + " [Pan]":
182 return PolarMouseWheelZoomPAN;
183
184 case EChart2DModifierType.PolarPan + " [Cartesian]":
185 return PolarPanCartesian;
186 case EChart2DModifierType.PolarPan + " [Polar]":
187 return PolarPanPolar;
188
189 case EChart2DModifierType.PolarZoomExtents:
190 return PolarZoomExtents;
191 default:
192 return undefined;
193 }
194 };
195
196 const newModifier = modifierToAddOrRemove();
197
198 if (sciChartSurface.chartModifiers.contains(newModifier)) {
199 sciChartSurface.chartModifiers.remove(newModifier, true);
200 detailTextAnnotation.text = "Select a modifier to see its info";
201 } else {
202 sciChartSurface.chartModifiers.add(newModifier);
203 detailTextAnnotation.text = POLAR_MODIFIER_INFO[modifier]; // update the text
204 }
205 },
206 },
207 };
208};
209Polar 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: Charts added in v4 (16 Demos)
JavaScript Histogram Chart
Create a JavaScript Histogram Chart with custom texture fills and patterns. Try the SciChart.js library for seamless integration today.
JavaScript Gantt Chart Example
Build a JavaScript Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
JavaScript Choropleth Map Example
Create a JavaScript Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
JavaScript Multi-Layer Map Example
Create a JavaScript Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
JavaScript Animated Bar Chart Example
Bring annual comparison data to life with the JavaScript Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.
JavaScript Vector Field Plot
View the JavaScript Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
JavaScript Waterfall Chart | Bridge Chart
Build a JavaScript Waterfall Chart with dynamic coloring, multi-line data labels and responsive design. Try SciChart.js for seamless integration today.
JavaScript Box Plot Chart
Try the JavaScript Box-Plot Chart examples with developer-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling.
JavaScript Triangle Series | Triangle Mesh Chart
Create JavaScript Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
JavaScript Treemap Chart
Create a JavaScript Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
JavaScript Map Chart with Heatmap overlay
Design a highly dynamic JavaScript Map Chart with Heatmap overlay with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
Realtime Audio Analyzer Bars Demo
Demonstrating the capability of SciChart.js to create a JavaScript Audio Analyzer Bars and visualize the Fourier-Transform of an audio waveform in realtime.
JavaScript Linear Gauges Example
View the JavaScript Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
JavaScript Order of Rendering Example
The JavaScript Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.
JavaScript Responsive HTML Annotations Example
Build Responsive JavaScript HTML Annotations with SciChart. Use the advanced CSS container queries for responsive text layout and custom design. View demo now.
HTML Annotations and Custom in-chart Controls Example
JavaScript HTML Chart Control example demonstrates advanced HTML annotation integration and how to render HTML components within charts. Try the SciChart demo.