DEV Community

loading...

Chart.js Chart displays but no data

amiltonxavier profile image Amiltonxavier ・1 min read

I'm using React with react-chartjs-2 I'm passing the data to the data. But I am getting a Graph without data. ATT: inside the data I'm mapping a product object

const [chartData, setChartData] = useState({})
    const products= [
        {name: "PC", solds: 34},
        {name: "Mouce", solds: 55},
        {name: "keyboard", solds: 6},
        {name: "Process", solds: 2},
    ]
    const chart = () => {
        setChartData({
            labels: ['PC', 'Mouse', 'Keyboard', 'Process' ],
            datasets: [{
                label: 'Level of Thiccness',
                data: [Object.entries(products).map(names => names.solds)],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.6)'
                ],
                borderWidth: 4
            }]
        })
    }

    useEffect(() => {
        chart();
    }, [])
    return (
        <div>
            <Line 
            data={chartData}
            />
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide