React 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.tsx
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 - React
Overview
This React example demonstrates an interactive Polar Chart with toggleable modifiers using SciChart's React wrapper. The component provides a UI panel to enable/disable different chart interactions while displaying active modifier instructions.
Technical Implementation
The chart is wrapped in the SciChartReact component with the drawExample initialization function. React state manages the active modifiers and detects conflicts between incompatible interactions. The left panel contains checkboxes for each modifier type, styled with Material-UI components. The implementation uses the useState hook to track modifier states and handle toggle events.
Features and Capabilities
The example showcases dynamic modifier management with real-time feedback. When users toggle modifiers, the central annotation updates with usage instructions. Conflict detection warns users about incompatible modifier combinations. The responsive layout maintains chart visibility across screen sizes.
Integration and Best Practices
This demonstrates React best practices including component composition, state management, and clean integration with SciChart's API. The example can be extended by adding custom modifier configurations or integrating with larger data management systems.
react Chart Examples & Demos
See Also: Charts added in v4 (16 Demos)
React Histogram Chart
Create a React Histogram Chart with custom texture fills and patterns. Try the SciChartReact wrapper component for seamless React integration today.
React Gantt Chart Example
Build a React Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
React Choropleth Map Example
Create a React Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
React Multi-Layer Map Example
Create a React Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
React Animated Bar Chart Example
Bring annual comparison data to life with the React Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.
React Vector Field Plot
View the React Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
React Waterfall Chart | Bridge Chart
Build a React Waterfall Chart with dynamic coloring, multi-line data labels and responsive design, using the SciChartReact component for seamless integration.
React Box Plot Chart
Try the React Box Plot Chart example for React-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling. Try the demo now.
React Triangle Series | Triangle Mesh Chart
Create React Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
React Treemap Chart
Create a React Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
React Map Chart with Heatmap overlay
Design a highly dynamic React 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.
React Linear Gauges Example
View the React Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
React Order of Rendering Example
The React Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.
React Responsive HTML Annotations Example
Build Responsive React 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
React HTML Chart Control example demonstrates advanced HTML annotation integration and how to render HTML components within charts. Try the SciChart demo.