2

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 | 

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.