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.

Fullscreen

Edit

Docs

drawExample.ts

index.tsx

theme.ts

Copy to clipboard

Minimise

Fullscreen

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};
210

Polar 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

React Chart with Multiple X Axes

Demonstrates Multiple X & Y Axis on a React Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning

React Chart with Secondary Y Axes

Demonstrates Secondary Y Axis on a React Chart using SciChart.js. SciChart supports unlimited, multiple left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning