SciChart.js - High Performance Realtime Javascript Charts Examples Suite

Using Theme Manager

Demonstrates the light and dark theme in SciChart.js, High Performance JavaScript Charts

SciChartDark

Source Code

View on GitHub
import * as React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
import { SciChartSurface } from "scichart";
import { SciChartJSDarkTheme } from "scichart/Charting/Themes/SciChartJSDarkTheme";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { FastCandlestickRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastCandlestickRenderableSeries";
import { OhlcDataSeries } from "scichart/Charting/Model/OhlcDataSeries";
import { closeValues, dateValues, highValues, lowValues, openValues } from "./data/themeing2dData";
import { FastColumnRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastColumnRenderableSeries";
import { RolloverModifier } from "scichart/Charting/ChartModifiers/RolloverModifier";
import { TSciChart } from "scichart/types/TSciChart";
import { SciChartJSLightTheme } from "scichart/Charting/Themes/SciChartJSLightTheme";

const divElementId = "chart";

const drawExample = async () => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
    sciChartSurface.applyTheme(new SciChartJSDarkTheme());
    const xAxis = new NumericAxis(wasmContext);
    xAxis.visibleRange = new NumberRange(0, 31);
    sciChartSurface.xAxes.add(xAxis);

    const yAxis = new NumericAxis(wasmContext);
    yAxis.visibleRange = new NumberRange(1, 1.2);
    yAxis.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(3);
    sciChartSurface.yAxes.add(yAxis);

    const series1 = new FastLineRenderableSeries(wasmContext);
    series1.strokeThickness = 3;
    sciChartSurface.renderableSeries.add(series1);

    series1.dataSeries = new XyDataSeries(wasmContext, {
        xValues: [1, 15, 30],
        yValues: [1.12, 1.11, 1.1],
    });

    const series2 = new FastCandlestickRenderableSeries(wasmContext, {
        strokeThickness: 2,
        dataSeries: new OhlcDataSeries(wasmContext, {
            xValues: dateValues,
            openValues,
            highValues,
            lowValues,
            closeValues,
        }),
        dataPointWidth: 0.5,
    });
    sciChartSurface.renderableSeries.add(series2);

    const series3 = new FastColumnRenderableSeries(wasmContext, {
        fill: "rgba(176, 196, 222, 0.7)",
        stroke: "#4682b4",
        strokeThickness: 2,
        dataPointWidth: 0.5,
    });
    sciChartSurface.renderableSeries.add(series3);
    const dataSeries = new XyDataSeries(wasmContext);
    for (let i = 1; i <= 30; i++) {
        dataSeries.append(i, 1 + Math.sin(i * 0.1) * 0.1);
    }
    series3.dataSeries = dataSeries;

    sciChartSurface.chartModifiers.add(new RolloverModifier());
    return { sciChartSurface, wasmContext };
};

enum ETheme {
    SciChartDark,
    SciChartLight,
}

const themeSelect = [
    { value: ETheme.SciChartDark, text: "SciChartDark" },
    { value: ETheme.SciChartLight, text: "SciChartLight" },
];

export default function UsingThemeManager() {
    const [themeToDisplay, setThemeToDisplay] = React.useState<ETheme>(ETheme.SciChartDark);
    const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();
    const [wasmContext, setWasmContext] = React.useState<TSciChart>();
    const [showChart, setShowChart] = React.useState(false);

    React.useEffect(() => {
        (async () => {
            const res = await drawExample();
            setSciChartSurface(res.sciChartSurface);
            setWasmContext(res.wasmContext);
            setShowChart(true);
        })();
        // Delete sciChartSurface on unmount component to prevent memory leak
        return () => sciChartSurface?.delete();
    }, []);

    const handleChangeTheme = (event: React.ChangeEvent<{ value: unknown }>) => {
        const newValue = event.target.value as ETheme;
        setThemeToDisplay(newValue);
        switch (newValue) {
            case ETheme.SciChartDark:
                sciChartSurface.applyTheme(new SciChartJSDarkTheme());
                break;
            case ETheme.SciChartLight:
                sciChartSurface.applyTheme(new SciChartJSLightTheme());
        }
    };

    return (
        <div>
            <div id={divElementId} style={{ maxWidth: 900 }} />
            <div style={{ marginTop: 20, display: showChart ? "block" : "none" }}>
                <FormControl variant="filled" style={{ width: 200 }}>
                    <InputLabel id="sciChartTheme-label">Select Theme</InputLabel>
                    <Select
                        labelId="sciChartTheme-label"
                        id="sciChartTheme"
                        value={themeToDisplay}
                        onChange={handleChangeTheme}
                    >
                        {themeSelect.map((el) => (
                            <MenuItem key={el.value} value={el.value}>
                                {el.text}
                            </MenuItem>
                        ))}
                    </Select>
                </FormControl>
            </div>
        </div>
    );
}

// JavaScript Chart Examples

SciChart.js ships with ~40 JavaScript Chart Examples which you can browse, play with, view the source code and see related documentation. All of this is possible with the SciChart.js Examples Suite, which ships as part of the SciChart.js SDK

Description

SciChart.js ships with a light and a dark theme, which you can switch by calling the SciChartSurface.applyTheme() function.

Tips!

If you implement IThemeProvider you can create your own custom themes! It's also possible to style chart-parts in code.

Documentation Links

See Also

SciChart.js: Fast, Realtime, High Performance JavaScript Charts | JavaScript Chart Examples | Sitemap