CODEWITHSUNDEEP
javascriptchart.js
malandro
malandro

Reputation: 107

Cannot create chart on react element

I want to make a chart element from chart.js on my react element but i get an error

    import React from 'react'
    import {Chart} from 'chart.js'//I also tried import Chart

    export default function Stats(props) {

    const options = {
         scales: {
          xAxes: [{
            barPercentage: 0.5,
            barThickness: 6,
            maxBarThickness: 8,
            minBarLength: 2,
            gridLines: {
                offsetGridLines: true
            }
          }]
         }
    }

    const data = {
      labels: ['Red', 'Blue'],
      datasets: [{
          label: '# of Votes',
          data: [12, 19],
          backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
           'rgba(54, 162, 235, 0.2)'
          ],
          borderColor: [
           'rgba(255, 99, 132, 1)',
           'rgba(54, 162, 235, 1)'
          ],
          borderWidth: 1
      }]
     }

   return (
     <div className="status">
      <canvas id="myChart" width="400" height="400">
        <Chart
          type="bar"
          data={data}
          options={options}
        />
       </canvas>
     </div>
    )
    }

I get the error

    TypeError: Cannot read property 'construct' of undefined

    Chart
    node_modules/chart.js/dist/Chart.js:8045

      8042 | }
      8043 | 
      8044 | var Chart = function (item, config) {
    > 8045 |   this.construct(item, config);
 | ^  8046 |   return this;
      8047 | };
      8048 |

Upvotes: 2

Views: 207

Answers (1)

coffidev
coffidev

Reputation: 999

If you're using the chart.js library from https://www.chartjs.org/docs/latest/ the the problem is that chart is not a react component, is just a class, thats why you can't place it on a react three like that.

Try using this wrapper instead: https://github.com/jerairrest/react-chartjs-2

Upvotes: 1

Related Questions