React Polar Label Modes

1import {
2    SciChartPolarSurface,
3    PolarMouseWheelZoomModifier,
4    PolarZoomExtentsModifier,
5    PolarPanModifier,
6    XyDataSeries,
7    PolarLineRenderableSeries,
8    EllipsePointMarker,
9    PolarNumericAxis, 
10    EPolarAxisMode,
11    NumberRange,
12    EPolarLabelMode,
13} from "scichart";
14import { appTheme } from "../../../theme";
15
16export const drawExample = async (rootElement: string | HTMLDivElement) => {
17    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
18        theme: appTheme.SciChartJsTheme,
19    });
20
21    const radialYAxis = new PolarNumericAxis(wasmContext, {
22        polarAxisMode: EPolarAxisMode.Radial,
23
24        drawMinorGridLines: false,
25        drawMajorTickLines: false,
26        drawMinorTickLines: false,
27
28        useNativeText: true,
29        drawLabels: true,
30        innerRadius: 0,
31        labelPrecision: 0,
32    });
33    sciChartSurface.yAxes.add(radialYAxis);
34
35    // Only Angular axes support `polarLabelMode`
36    const angularXAxis = new PolarNumericAxis(wasmContext, {
37        polarAxisMode: EPolarAxisMode.Angular,
38        polarLabelMode: EPolarLabelMode.Horizontal, // this will change based on user input
39        visibleRange: new NumberRange(0, 100),
40        useNativeText: true,
41
42        drawMinorGridLines: false,
43        drawMajorTickLines: false,
44        drawMinorTickLines: false,
45
46        zoomExtentsToInitialRange: true,
47        labelStyle: {
48            color: "white",
49            fontSize: 16
50        },
51    });
52    sciChartSurface.xAxes.add(angularXAxis);
53
54    // Add a series to better visualize the chart
55    const polarlineSeries = new PolarLineRenderableSeries(wasmContext, {
56        dataSeries: new XyDataSeries(wasmContext, {
57            xValues: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90],
58            yValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
59        }),
60        pointMarker: new EllipsePointMarker(wasmContext),
61        stroke: appTheme.VividOrange,
62        strokeThickness: 3
63    });
64    sciChartSurface.renderableSeries.add(polarlineSeries);
65
66    sciChartSurface.chartModifiers.add(
67        new PolarPanModifier(),
68        new PolarZoomExtentsModifier(),
69        new PolarMouseWheelZoomModifier({ growFactor: 0.0002 })
70    );
71
72    // sets new polarLabelMode
73    function changePolarLabelMode(newMode: EPolarLabelMode) {
74        angularXAxis.polarLabelMode = newMode;
75    }
76
77    return { 
78        sciChartSurface, 
79        wasmContext, 
80        controls: { 
81            changePolarLabelMode,
82            toggleIsInnerAxis: (isInnerAxis: boolean) => {
83                angularXAxis.isInnerAxis = isInnerAxis;
84                radialYAxis.isInnerAxis = isInnerAxis;
85            }
86        } 
87    };
88};