0

I was using react-chartjs-2 with typescript + react and trying to create a simple Bar chart but my browser's console was complaining about width is undefined. I'm not exactly sure if there's anything I was not configuring right below?

Browser's console error:

Uncaught TypeError: Cannot read property 'width' of undefined
    at n.draw (Chart.js:15474)
    at Object.draw (Chart.js:7231)
    at $t.draw (Chart.js:9825)
    at $t.render (Chart.js:9782)
    at Object.callback (Chart.js:2204)
    at Object.advance (Chart.js:3528)
    at Object.startDigest (Chart.js:3501)
    at Chart.js:3490

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import BarChartComponent from './components/BarChartComponent';

ReactDOM.render(
    <div>
        <BarChartComponent />
    </div>,
    document.querySelector('#app')
)

BarChartComponent.tsx


import * as React from 'react';
import { Bar } from 'react-chartjs-2';

export default class BarChartComponent extends React.Component {
    chartData = {
        labels: ['CA', 'TX'],
        datasets:[
        {
            label:'Population',
            data:[
                23000,
                10000
            ],
            backgroundColor:[
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)'
            ]
        }
        ]
    };

    render() {
        return (
            <Bar 
                data={this.chartData}
                options={{
                    title:{
                    display: true,
                    text: "Populations",
                    fontSize: 25
                    },
                    legend:{
                        display: true,
                        position: "center"
                    },
                    maintainAspectRatio: false,
                }}
            />
        );
    }
}

Any suggestions would be appreciated.

hong823
  • 21
  • 4

1 Answers1

0

I believe that if you set maintainAspectRatio to false, you must explicitly define the dimensions.

Michael Landis
  • 1,074
  • 7
  • 12