React Text Chart

1import { appTheme } from "../../../theme";
2import {
3    SciChartSurface,
4    NumericAxis,
5    NumberRange,
6    ZoomPanModifier,
7    ZoomExtentsModifier,
8    MouseWheelZoomModifier,
9    LogarithmicAxis,
10    ENumericFormat,
11    XyTextDataSeries,
12    FastTextRenderableSeries,
13} from "scichart";
14
15// tslint:disable:no-empty
16
17export const drawExample = async (rootElement: string | HTMLDivElement) => {
18    // Create a SciChartSurface
19    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
20        theme: appTheme.SciChartJsTheme,
21    });
22    const xAxis = new LogarithmicAxis(wasmContext, {
23        axisTitle: "Number of Tweets",
24        logBase: 2,
25        labelFormat: ENumericFormat.SignificantFigures,
26        growBy: new NumberRange(0, 0.1),
27    });
28    sciChartSurface.xAxes.add(xAxis);
29    sciChartSurface.yAxes.add(
30        new NumericAxis(wasmContext, {
31            axisTitle: "Average Sentiment",
32            labelPrecision: 2,
33            visibleRange: new NumberRange(0, 1.01),
34            visibleRangeLimit: new NumberRange(0, 1.01),
35        })
36    );
37
38    // data is { xValues: number[], yValues: number[], textValues: string[] }
39    const data: { xValues: number[]; yValues: number[]; textValues: string[] } = await fetch(
40        "https://demo.scichart.com/api/tweetData"
41    ).then((r) => r.json());
42    const series = new FastTextRenderableSeries(wasmContext, {
43        dataLabels: { style: { fontFamily: "arial", fontSize: 10 }, calculateTextBounds: false },
44        dataSeries: new XyTextDataSeries(wasmContext, data),
45    });
46    sciChartSurface.renderableSeries.add(series);
47
48    sciChartSurface.chartModifiers.add(
49        new ZoomPanModifier({ enableZoom: true }),
50        new ZoomExtentsModifier(),
51        new MouseWheelZoomModifier()
52    );
53
54    return { sciChartSurface, wasmContext };
55};
56