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 color: appTheme.DarkIndigo,
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 labelStyle: {
84 color: "white",
85 },
86 majorGridLineStyle: {
87 color: appTheme.DarkIndigo,
88 strokeThickness: 1,
89 },
90 });
91 sciChartSurface.xAxes.add(polarXAxis);
92
93 const polarColumn = new PolarXyScatterRenderableSeries(wasmContext, {
94 dataSeries: new XyDataSeries(wasmContext, {
95 xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
96 yValues: [2.6, 5.3, 3.5, 2.7, 4.8, 3.8, 5, 4.5, 3.5],
97 }),
98 pointMarker: new TrianglePointMarker(wasmContext, {
99 width: 14,
100 height: 12,
101 fill: "#000000",
102 stroke: "#FFAA00",
103 strokeThickness: 2,
104 }),
105 paletteProvider: new DataPointSelectionPaletteProvider({
106 fill: "#FFFFFF",
107 stroke: "#00AA00",
108 })
109 });
110 sciChartSurface.renderableSeries.add(polarColumn);
111
112 const detailTextAnnotation = new NativeTextAnnotation({
113 text: POLAR_MODIFIER_INFO[EChart2DModifierType.PolarMouseWheelZoom],
114 fontSize: 24,
115 xCoordinateMode: ECoordinateMode.Relative,
116 yCoordinateMode: ECoordinateMode.Relative,
117 x1: 0,
118 y1: 0,
119 verticalAnchorPoint: EVerticalAnchorPoint.Center,
120 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
121 multiLineAlignment: EMultiLineAlignment.Center,
122 lineSpacing: 5,
123 });
124 sciChartSurface.annotations.add(detailTextAnnotation);
125
126 // define all modifiers
127 const PolarArcZoom = new PolarArcZoomModifier({
128 stroke: STROKE,
129 fill: STROKE + "20", // 15% opacity
130 strokeThickness: 3,
131 });
132 const PolarCursor = new PolarCursorModifier({
133 axisLabelStroke: STROKE,
134 axisLabelFill: appTheme.DarkIndigo,
135 tooltipTextStroke: STROKE,
136 lineColor: STROKE,
137 });
138 const PolarDataPointSelection = new PolarDataPointSelectionModifier({
139 allowDragSelect: true,
140 allowClickSelect: true,
141 selectionStroke: "#3388FF",
142 selectionFill: "#3388FF44",
143 onSelectionChanged: (args) => {
144 console.log("seriesSelectionModifier onSelectionChanged", args);
145 },
146 });
147 const PolarLegend = new PolarLegendModifier({
148 backgroundColor: appTheme.DarkIndigo,
149 textColor: STROKE,
150 });
151 const PolarMouseWheelZoom = new PolarMouseWheelZoomModifier({
152 defaultActionType: EActionType.Zoom
153 });
154 const PolarMouseWheelZoomPAN = new PolarMouseWheelZoomModifier({
155 defaultActionType: EActionType.Pan
156 });
157 const PolarPanCartesian = new PolarPanModifier({
158 primaryPanMode: EPolarPanModifierPanMode.Cartesian,
159 });
160 const PolarPanPolar = new PolarPanModifier({
161 primaryPanMode: EPolarPanModifierPanMode.PolarStartAngle,
162 });
163 const PolarZoomExtents = new PolarZoomExtentsModifier();
164
165 // add by default these 3 modifiers
166 sciChartSurface.chartModifiers.add(PolarZoomExtents, PolarPanCartesian, PolarMouseWheelZoom);
167
168 return {
169 sciChartSurface,
170 controls: {
171 toggleModifier: (modifier: EChart2DModifierType) => {
172 const modifierToAddOrRemove = () => {
173 switch (modifier) {
174 case EChart2DModifierType.PolarArcZoom:
175 return PolarArcZoom;
176 case EChart2DModifierType.PolarCursor:
177 return PolarCursor;
178 case EChart2DModifierType.PolarDataPointSelection:
179 return PolarDataPointSelection;
180 case EChart2DModifierType.PolarLegend:
181 return PolarLegend;
182
183 case EChart2DModifierType.PolarMouseWheelZoom:
184 return PolarMouseWheelZoom;
185 case EChart2DModifierType.PolarMouseWheelZoom + " [Pan]":
186 return PolarMouseWheelZoomPAN;
187
188 case EChart2DModifierType.PolarPan + " [Cartesian]":
189 return PolarPanCartesian;
190 case EChart2DModifierType.PolarPan + " [Polar]":
191 return PolarPanPolar;
192
193 case EChart2DModifierType.PolarZoomExtents:
194 return PolarZoomExtents;
195 default:
196 return undefined;
197 }
198 };
199
200 const newModifier = modifierToAddOrRemove();
201
202 if (sciChartSurface.chartModifiers.contains(newModifier)) {
203 sciChartSurface.chartModifiers.remove(newModifier, true);
204 detailTextAnnotation.text = "Select a modifier to see its info";
205 } else {
206 sciChartSurface.chartModifiers.add(newModifier);
207 detailTextAnnotation.text = POLAR_MODIFIER_INFO[modifier]; // update the text
208 }
209 },
210 },
211 };
212};
213Polar 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.