React Chartjs is not showing any output

Question

React

As you can see JSX code for Bar Chart, suppose to show a bar chart with data values. But it doesn't show any output or error as well

JSX

import React from 'react' import { Bar } from 'react-chartjs-2'; export default function BarChart() { var data = { labels: ["Home", "Product", "Cart"], datasets: [ { label: ' ', data: [38, 75, 25], borderColor: ['rgb(82,134,163)'], backgroundColor: ['rgb(82,134,163)'], pointBackgroundColor: 'rgb(82,134,163)', pointBorderColor: 'rgb(82,134,163)' } ] } return ( <div> <Bar Data={data} height={400} width={600} options={{ maintainAspectRatio: false }} /> </div> ) }

Houssam · Accepted Answer · 2021-10-19 08:57:11Z

The prop for passing the data to the Bar component should be data instead of Data:

<Bar data={data} height={400} width={600} options={{ maintainAspectRatio: false }} />

As a result, the component was behaving as it was not receiving any data.

Collectives™ on Stack Overflow

React Chartjs is not showing any output

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related