Can't resize react-chartjs-2 doughnut chart

Question

I am trying to make a doughnut chart with react and gatsbyjs. The chart works fine but I can not get it to use the full width of the div. It displays too small for the area

Answer 1

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Doughnut } from 'react-chartjs-2'

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      data: {
        datasets: [{
          data: [10, 20, 30]
        }],
        labels: [
          'Red',
          'Yellow',
          'Blue'
        ]
      }
    }
  }

  render() {
    return (

      
    )
  }
}

render(, document.getElementById('root'));