React Polar Axis Label Modes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

import {
    SciChartPolarSurface,
    PolarMouseWheelZoomModifier,
    PolarZoomExtentsModifier,
    PolarPanModifier,
    XyDataSeries,
    PolarLineRenderableSeries,
    EllipsePointMarker,
    PolarNumericAxis,
    EPolarAxisMode,
    NumberRange,
    EPolarLabelMode,
} from "scichart";
import { appTheme } from "./appTheme";

export const drawExample = async (rootElement: string | HTMLDivElement) => {
    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
        theme: appTheme.SciChartJsTheme,
    });

    const radialYAxis = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Radial,

        drawMinorGridLines: false,
        drawMajorTickLines: false,
        drawMinorTickLines: false,

        useNativeText: true,
        drawLabels: true,
        innerRadius: 0,
        labelPrecision: 0,
    });
    sciChartSurface.yAxes.add(radialYAxis);

    // Only Angular axes support `polarLabelMode`
    const angularXAxis = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Angular,
        polarLabelMode: EPolarLabelMode.Horizontal, // this will change based on user input
        visibleRange: new NumberRange(0, 100),
        useNativeText: true,

        drawMinorGridLines: false,
        drawMajorTickLines: false,
        drawMinorTickLines: false,

        zoomExtentsToInitialRange: true,
        labelStyle: {
            fontSize: 16,
        },
    });
    sciChartSurface.xAxes.add(angularXAxis);

    // Add a series to better visualize the chart
    const polarlineSeries = new PolarLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, {
            xValues: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90],
            yValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        }),
        pointMarker: new EllipsePointMarker(wasmContext),
        stroke: appTheme.VividOrange,
        strokeThickness: 3,
    });
    sciChartSurface.renderableSeries.add(polarlineSeries);

    sciChartSurface.chartModifiers.add(
        new PolarPanModifier(),
        new PolarZoomExtentsModifier(),
        new PolarMouseWheelZoomModifier({ growFactor: 0.0002 })
    );

    // sets new polarLabelMode
    function changePolarLabelMode(newMode: EPolarLabelMode) {
        angularXAxis.polarLabelMode = newMode;
    }

    return {
        sciChartSurface,
        wasmContext,
        controls: {
            changePolarLabelMode,
            toggleIsInnerAxis: (isInnerAxis: boolean) => {
                angularXAxis.isInnerAxis = isInnerAxis;
                radialYAxis.isInnerAxis = isInnerAxis;
            },
        },
    };
};