How to use Chartist in React Typescript Component

Question

I'm struggling to use Chartist in my React Typescript component. I'm using Chartist v1.3.0 and am getting these errors:

This is my code:

import styled from "styled-components";
import 'chartist/dist/index.css';
import { LineChart } from 'chartist';


export const ChartPage = () => {

    new LineChart(
        '#chart',
        {
            labels: [1, 2, 3, 4, 5, 6, 7, 8],
            series: [[5, 9, 7, 8, 5, 3, 5, 4]]
        },
        {
            low: 0,
            showArea: true
        }
    );
      

    return (
        <div>
            <div id="chart"></div>
        </div>
    )
}

Can someone help me use chartist in my app. I've tried a bunch of stuff like making sure DOM element exists but I can't seem to get it to work.

Answer 1

I ran into this problem as well and was able to solve it using useCallback. I found some useful information in this question: React Hooks - Ref is not available inside useEffect

export const ChartPage = () => {
    const chart = useCallback(() => {
        new LineChart(
            '#chart',
            {
                labels: [1, 2, 3, 4, 5, 6, 7, 8],
                series: [[5, 9, 7, 8, 5, 3, 5, 4]]
            },
            {
                low: 0,
                showArea: true
            }
        );
    }, []);


    return (
        <div>
            <div id="chart" ref={chart}></div>
        </div>
    )
}