LightningChart JS 崩溃与 t.toFixed is not a function

Question

I am using a LightningChart JS by Arction to plot a bar graph and it keeps crashing after adding the rectangle figures with an error message: t.toFixed is not a function

The series being used is a rectangle series and I'd like to use only one rectangle series because I need them all under one group.

Below is my code

// Core react imports
import React, { useEffect, useCallback } from 'react'
// React bootstrap imports
import { Col } from "react-bootstrap"
// Chart imports
import {
    lightningChart,
    SolidFill,
    SolidLine,
    emptyTick,
    emptyLine,
    FontSettings,
    ColorHEX,
} from "@arction/lcjs"
import axios from "axios"
export default function Histogram() {
    const createChart = useCallback(
        () => {

            const chart = lightningChart().ChartXY({ containerId: "myplot" });
            chart
                .setTitle("RR Histogram")
                .setTitleFillStyle((solidFill) => solidFill.setColor(ColorHEX("#000")))
                .setTitleMarginTop(0)
                .setTitleMarginBottom(0)
                .setChartBackgroundFillStyle((solidFill) =>
                    solidFill.setColor(ColorHEX("#FFF"))
                )
                .setBackgroundFillStyle((solidFill) =>
                    solidFill.setColor(ColorHEX("#FFF"))
                )
                .setZoomingRectangleStrokeStyle(
                    new SolidLine({
                        fillStyle: new SolidFill({ color: ColorHEX("#000") }),
                    })
                )
                .setTitleFont(new FontSettings({ size: 20 }));
            // Configure X-axis of chart to be progressive and have nice interval.
            chart
                .getDefaultAxisX();
            // .setTickStyle(emptyTick)
            // .setNibStyle(emptyLine)
            // .setTitleFont(new FontSettings({ size: 12 }))
            // .setStrokeStyle(emptyLine);
            chart
                .getDefaultAxisY();
            // .setTickStyle(emptyTick)
            // .setNibStyle(emptyLine)
            // .setStrokeStyle(emptyLine);
            let rectSeries = chart
                .addRectangleSeries()
                .setDefaultStyle(figure => figure.setFillStyle(new SolidFill({
                    color: ColorHEX("#000")
                })));
            let rr_hist = {};
            axios
                .get("Api  url here")
                .then((res) => {
                    console.log(res)
                    rr_hist = res.data;
                })
                .catch((err) => console.log(err));
            setTimeout(() => {
                for (let point in rr_hist) {
                    let insert_Point = {
                        height: rr_hist[point],
                        y: 0,
                        x: point,
                        width: 1
                    }
                    let bar = rectSeries.add(insert_Point);
                    bar.setDimensions(insert_Point);
                    bar.setFillStyle(new SolidFill({ color: ColorHEX("#000") }));
                    bar.setStrokeStyle(new SolidLine({
                        fillStyle: new SolidFill({ color: ColorHEX("#000") }),
                    }))
                }
                console.log(rr_hist)
            }, 2000)
        },
        [],
    )
    useEffect(() => {
        createChart()
    }, [createChart])
    return (
        <Col xs={12} style={{ height: "100%", width: "100%" }}>
            <div id="myplot" style={{ height: "100%", width: "100%" }}></div>
        </Col>
    )
}

Also could you please let me know how to improve the styling?

Answer 1

Most likely reason for the crash is that your height or x field for the new rectangle figure is not a number. LightningChart JS doesn't do type conversions for input values.

So when adding new rectangles to rectangle series make sure to do the type conversion from string to number yourself.

let insert_Point = {
    height: Number(rr_hist[point]),
    y: 0,
    x: Number(point),
    width: 1
}
let bar = rectSeries.add(insert_Point);

Instead of using Number for the conversion you could use parseFloat or parseInt depending on the type of data you use. See https://stackoverflow.com/a/13676265/6198227 that answer for more detailed differences between Number and parseFloat .

For styling, it looks like you would benefit from using a light colored theme. When creating the chart with ChartXY you can specify theme option.

const chart = lightningChart().ChartXY({
    theme: Themes.light
})

You can see the available themes in our docs Themes