reactjs-charts v1.1.0

A library of React components created using create-react-app

npm install reactjs-charts

How it Works

Chart.js is a open source library to render charts in HTML canvas. Therefore each React Component returns a canvas with its chart rendered. It uses useEffect React Hook to listen to props for automatic changes and manage its life cycle. So when a change happens, the old chart will be deleted a new will be created with the changed props.

Documentation

import React, { useState } from 'react'
import { ScatterChart } from 'reactjs-charts'

export default function Example() {
    const [ data, setData ] = useState([
        { x: Math.random() * 10, y: Math.random() * 10 },
        { x: Math.random() * 10, y: Math.random() * 10 },
        { x: Math.random() * 10, y: Math.random() * 10 },
    ])

    function InsertNewDatapoints() {
        setData(lastState => [...lastState, { x: Math.random() * 10, y: Math.random() * 10 }])
    }

    return (
        <>
            <ScatterChart 
                label="My chart"
                data={data}
                backgroundColor='tomato'
            />

            <button onClick={InsertNewDatapoints}>Change me!</button>
        </>
    )
}

import React, { useState } from 'react'
import { DoughnutChart } from 'reactjs-charts'

export default function Example() {
    const [ data, setData ] = useState([
        Math.random() * 10, Math.random() * 10
    ])

    function ChangeDataValue() {
        setData([ Math.random() * 10, Math.random() * 10 ])
    }

    return (
        <>
            <DoughnutChart 
                label="My chart", 
                labels={['January', 'February']}
                data={data}
                backgroundColor={['tomato', '#c4c4c4']}
            />

            <button onClick={ChangeDataValue}>Change me!</button>
        </>
    )
}