React Chart with Logarithmic Axis Example

1import {
2    ENumericFormat,
3    EllipsePointMarker,
4    FastLineRenderableSeries,
5    LegendModifier,
6    LogarithmicAxis,
7    MouseWheelZoomModifier,
8    NumericAxis,
9    RubberBandXyZoomModifier,
10    SciChartSurface,
11    SweepAnimation,
12    XyDataSeries,
13    Thickness,
14    ZoomExtentsModifier,
15} from "scichart";
16import { appTheme } from "../../../theme";
17import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
18
19const Y_AXIS_LINEAR_ID = "Y_AXIS_LINEAR_ID";
20const X_AXIS_LINEAR_ID = "X_AXIS_LINEAR_ID";
21
22export const drawExample = async (rootElement: string | HTMLDivElement) => {
23    // Create a SciChartSurface
24    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
25        theme: {
26            ...appTheme.SciChartJsTheme,
27            majorGridLineBrush: appTheme.MutedSkyBlue + "55",
28            minorGridLineBrush: appTheme.MutedSkyBlue + "22",
29        },
30        title: "Logarithmic X & Y Axis",
31        titleStyle: {
32            fontSize: 20,
33            fontWeight: "bold",
34            placeWithinChart: true,
35            color: appTheme.ForegroundColor + "C4",
36            padding: Thickness.fromString("10 0 4 0"),
37        },
38    });
39
40    // Create an X and Y Axis
41    const xAxisLogarithmic = new LogarithmicAxis(wasmContext, {
42        logBase: 10,
43        labelFormat: ENumericFormat.Scientific,
44        labelPrecision: 2,
45        minorsPerMajor: 10,
46        useNativeText: false,
47    });
48    sciChartSurface.xAxes.add(xAxisLogarithmic);
49
50    // The LogarithmicAxis will apply logarithmic scaling and labelling to your data.
51    // Simply replace a NumericAxis for a LogarithmicAxis on X or Y to apply this scaling
52    // Note options logBase, labelFormat which lets you specify exponent on labels
53    const yAxisLogarithmic = new LogarithmicAxis(wasmContext, {
54        logBase: 10,
55        labelFormat: ENumericFormat.Scientific,
56        labelPrecision: 2,
57        minorsPerMajor: 10,
58        useNativeText: false,
59    });
60    sciChartSurface.yAxes.add(yAxisLogarithmic);
61
62    const xAxisLinear = new NumericAxis(wasmContext, {
63        labelFormat: ENumericFormat.Decimal,
64        labelPrecision: 2,
65        isVisible: false,
66        id: X_AXIS_LINEAR_ID,
67    });
68    sciChartSurface.xAxes.add(xAxisLinear);
69
70    const yAxisLinear = new NumericAxis(wasmContext, {
71        labelFormat: ENumericFormat.Decimal,
72        labelPrecision: 2,
73        isVisible: false,
74        id: Y_AXIS_LINEAR_ID,
75    });
76    sciChartSurface.yAxes.add(yAxisLinear);
77
78    // Create some data
79    const data0 = ExampleDataProvider.getExponentialCurve(2, 100);
80    const data1 = ExampleDataProvider.getExponentialCurve(2.2, 100);
81    const data2 = ExampleDataProvider.getExponentialCurve(2.4, 100);
82
83    sciChartSurface.renderableSeries.add(
84        new FastLineRenderableSeries(wasmContext, {
85            dataSeries: new XyDataSeries(wasmContext, {
86                xValues: data0.xValues,
87                yValues: data0.yValues,
88                dataSeriesName: "y = x ^ 2",
89            }),
90            stroke: appTheme.VividSkyBlue,
91            strokeThickness: 3,
92            pointMarker: new EllipsePointMarker(wasmContext, {
93                width: 7,
94                height: 7,
95                fill: appTheme.VividSkyBlue,
96                strokeThickness: 0,
97            }),
98            animation: new SweepAnimation({ duration: 800, delay: 0 }),
99        })
100    );
101
102    sciChartSurface.renderableSeries.add(
103        new FastLineRenderableSeries(wasmContext, {
104            dataSeries: new XyDataSeries(wasmContext, {
105                xValues: data1.xValues,
106                yValues: data1.yValues,
107                dataSeriesName: "y = x ^ 2.2",
108            }),
109            stroke: appTheme.VividPink,
110            strokeThickness: 3,
111            pointMarker: new EllipsePointMarker(wasmContext, {
112                width: 7,
113                height: 7,
114                fill: appTheme.VividPink,
115                strokeThickness: 0,
116            }),
117            animation: new SweepAnimation({ duration: 800, delay: 0 }),
118        })
119    );
120
121    sciChartSurface.renderableSeries.add(
122        new FastLineRenderableSeries(wasmContext, {
123            dataSeries: new XyDataSeries(wasmContext, {
124                xValues: data2.xValues,
125                yValues: data2.yValues,
126                dataSeriesName: "y = x ^ 2.4",
127            }),
128            stroke: appTheme.VividOrange,
129            strokeThickness: 3,
130            pointMarker: new EllipsePointMarker(wasmContext, {
131                width: 7,
132                height: 7,
133                fill: appTheme.VividOrange,
134                strokeThickness: 0,
135            }),
136            animation: new SweepAnimation({ duration: 800, delay: 0 }),
137        })
138    );
139
140    // Add some interactivity modifiers
141    sciChartSurface.chartModifiers.add(
142        new RubberBandXyZoomModifier(),
143        new MouseWheelZoomModifier(),
144        new ZoomExtentsModifier(),
145        new LegendModifier({ showCheckboxes: false })
146    );
147
148    sciChartSurface.zoomExtents();
149    return {
150        sciChartSurface,
151        wasmContext,
152        yAxisLogarithmic,
153        yAxisLinear,
154        xAxisLinear,
155        xAxisLogarithmic,
156    };
157};
158