Angular 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    ZoomExtentsModifier,
14    Thickness,
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    });
47    sciChartSurface.xAxes.add(xAxisLogarithmic);
48
49    // The LogarithmicAxis will apply logarithmic scaling and labelling to your data.
50    // Simply replace a NumericAxis for a LogarithmicAxis on X or Y to apply this scaling
51    // Note options logBase, labelFormat which lets you specify exponent on labels
52    const yAxisLogarithmic = new LogarithmicAxis(wasmContext, {
53        logBase: 10,
54        labelFormat: ENumericFormat.Scientific,
55        labelPrecision: 2,
56        minorsPerMajor: 10,
57    });
58    sciChartSurface.yAxes.add(yAxisLogarithmic);
59
60    const xAxisLinear = new NumericAxis(wasmContext, {
61        labelFormat: ENumericFormat.Decimal,
62        labelPrecision: 2,
63        isVisible: false,
64        id: X_AXIS_LINEAR_ID,
65    });
66    sciChartSurface.xAxes.add(xAxisLinear);
67
68    const yAxisLinear = new NumericAxis(wasmContext, {
69        labelFormat: ENumericFormat.Decimal,
70        labelPrecision: 2,
71        isVisible: false,
72        id: Y_AXIS_LINEAR_ID,
73    });
74    sciChartSurface.yAxes.add(yAxisLinear);
75
76    // Create some data
77    const data0 = ExampleDataProvider.getExponentialCurve(2, 100);
78    const data1 = ExampleDataProvider.getExponentialCurve(2.2, 100);
79    const data2 = ExampleDataProvider.getExponentialCurve(2.4, 100);
80
81    sciChartSurface.renderableSeries.add(
82        new FastLineRenderableSeries(wasmContext, {
83            dataSeries: new XyDataSeries(wasmContext, {
84                xValues: data0.xValues,
85                yValues: data0.yValues,
86                dataSeriesName: "y = x ^ 2",
87            }),
88            stroke: appTheme.VividSkyBlue,
89            strokeThickness: 3,
90            pointMarker: new EllipsePointMarker(wasmContext, {
91                width: 7,
92                height: 7,
93                fill: appTheme.VividSkyBlue,
94                strokeThickness: 0,
95            }),
96            animation: new SweepAnimation({ duration: 800, delay: 0 }),
97        })
98    );
99
100    sciChartSurface.renderableSeries.add(
101        new FastLineRenderableSeries(wasmContext, {
102            dataSeries: new XyDataSeries(wasmContext, {
103                xValues: data1.xValues,
104                yValues: data1.yValues,
105                dataSeriesName: "y = x ^ 2.2",
106            }),
107            stroke: appTheme.VividPink,
108            strokeThickness: 3,
109            pointMarker: new EllipsePointMarker(wasmContext, {
110                width: 7,
111                height: 7,
112                fill: appTheme.VividPink,
113                strokeThickness: 0,
114            }),
115            animation: new SweepAnimation({ duration: 800, delay: 0 }),
116        })
117    );
118
119    sciChartSurface.renderableSeries.add(
120        new FastLineRenderableSeries(wasmContext, {
121            dataSeries: new XyDataSeries(wasmContext, {
122                xValues: data2.xValues,
123                yValues: data2.yValues,
124                dataSeriesName: "y = x ^ 2.4",
125            }),
126            stroke: appTheme.VividOrange,
127            strokeThickness: 3,
128            pointMarker: new EllipsePointMarker(wasmContext, {
129                width: 7,
130                height: 7,
131                fill: appTheme.VividOrange,
132                strokeThickness: 0,
133            }),
134            animation: new SweepAnimation({ duration: 800, delay: 0 }),
135        })
136    );
137
138    // Add some interactivity modifiers
139    sciChartSurface.chartModifiers.add(
140        new RubberBandXyZoomModifier(),
141        new MouseWheelZoomModifier(),
142        new ZoomExtentsModifier(),
143        new LegendModifier({ showCheckboxes: false })
144    );
145
146    sciChartSurface.zoomExtents();
147    return {
148        sciChartSurface,
149        wasmContext,
150        yAxisLogarithmic,
151        yAxisLinear,
152        xAxisLinear,
153        xAxisLogarithmic,
154    };
155};
156