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