width and height do not work for me

[DimaXu]

I like this library very much. But in my testing with react-chartjs-2@1.3.0 and chart.js@2.3.0, the width and height do not work for me.
I set them as 300 and 200 respectively, the result was that the pie and Doughnut occupied the whole width of the page. I wonder whether something is wrong with my code or anything else in this library. Any response will be appreciated.

my code is:
<Pie
data={this.phyiscalMemory}
width={300}
height={200}
options={{
maintainAspectRatio: false
}}
/>

[DimaXu]

It should not be committed as an issue.

[iarry]

What was the fix here? I'm having the same issue.

[gor181]

hey @iarry

have you tried https://github.com/gor181/react-chartjs-2#custom-size ?

Cheers,

[iarry]

Yep, I set maintainAspectRatio: false. I can make the graph grow larger, but it won't go below 497px x 200px

[iarry]

I managed to change the width and height with CSS on the canvas, but it needed !important tags.

[alexisthual]

This still is an ongoing issue for me.
I used maintainAspectRatio: false in the options while trying to specify the height and width of a Line chart. The height works correctly but the width won't change. I had to put this Line in a div that has the appropriate width.

return (
    <div style={{width: '400px'}}>
        <Line
            data={data}
            options={options}
            height={200}
            width={400}
        />
    </div>
)

[huyvohcmc]

Did anybody find a way to fix this issue? I mean by passing the width and height directly as props?

<Pie
	data={data}
	width={100}
	height={50}
	options={{
		maintainAspectRatio: false
	}}
/>

doesn't work at all. The canvas width and height is always 678 and 948.

[solaomosola]

I have the same issue, using Pie.

[MikeRoberts2008]

I'm having this same issue, the height is respected but the width is ignored:

<Line data={data} width={200} height={200} options={{ maintainAspectRatio: false }} />

[nhuthan]

I have same issue, using doughnut

[KennethChiu123]

try
<Line data={data} width={200} height={200} options={{ maintainAspectRatio: false ,responsive:false }} />

[jayaramsurya]

when i decrease the width the screen , the graph width can't change but height will change . I tired many solution nothing works

[cention-sany]

May be this can help #334 (comment)

[DPTeamMember]

@KennethChiu123

<Line data={data} width={200} height={200} options={{ maintainAspectRatio: false }} />
This worked for me. responsive:false was not necessary for me.

Thank you.