CODEWITHSUNDEEP
javascriptreactjschartjs-2.6.0
Sandeep Kumar
Sandeep Kumar

Reputation: 13

React Chartjs is not showing any output

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>
            )
        }

Upvotes: 0

Views: 1425

Answers (1)

Houssam
Houssam

Reputation: 1877

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.

Upvotes: 2

Related Questions