React-chartjs-2: Pie / doughnut full responsive width

[QuantumHive]

I first thought this was an issue with the original chartjs, but found out that the following is an issue with react-chartjs-2:

When creating a pie or doughnut chart, the full width is not utilized.

When using vanilla chartjs, as you can see on this codepen, the full available width gets used, which increases the size of the chart.
In the demonstrations of react-chartjs-2 you can see that pie/doughnut charts are reduced in size because they do not utilize the full width. Try viewing this on a mobile device (or with your browser's developer tools in responsive mode). The chart becomes very small in size and could've been bigger.
A solution is indeed by changing the sizes manually, but this defeats the purpose of being a responsive chart.

Why is the pie/doughnut chart not utilizing the full width available of its parent container?

[ghost]

.myChartDiv canvas {
  width: 100%;
}

[mrcoredump]

I ended up with a extremely ugly workaround to for this problem:

    let myStyle={position:'relative',left:((this.props.width-3*this.props.spacing)/-2),width:(this.props.width-2*this.props.spacing)*2,height:this.props.width};
    return <div style={myStyle} ><Typography variant="title"  align="center" gutterBottom>{this.props.title} </Typography><Pie data={myData} legend={legendOpts} /></div>

This basically creates a div which has twice the width of what we intend to use and then offset that within the enclosing container. That needs to have the width set and overflow hidden.

[storesbuzz]

I too had same issue with doughnut chart, inner circle not getting full width. getting shrink leaving 90% side space blank.

I changed these two value and it's full width now.
responsive: true,
maintainAspectRatio: false,

[JHanLu]

@storesbuzz Your solution does not work for me.

[JHanLu]

options = {
  legend: {
    display: false
  }
}

Works for me!

[jahidmomin]

options = {
  legend: {
    display: false
  }
}

Works for me!

Its also work for me

[jaimeagudo]

None of the above worked reliably for me, this is hackish and not super accurate but got it "working" on iPhone's (tested on real Xr) iPad and desks

...

const isMobile = window.innerWidth < 500
const responsiveSizeHack = isMobile ? window.innerWidth + 400 : window.innerWidth
const options = { maintainAspectRatio: !isMobile, legend: { position: 'bottom' }}
return (<Doughnut
    options={options}
    height={responsiveSizeHack}
    width={responsiveSizeHack}
    data={data} />)