width and height do not work for me about react-chartjs-2 HOT 16 CLOSED

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

from react-chartjs-2.

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>
)

from react-chartjs-2.

It should not be committed as an issue.

from react-chartjs-2.

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

from react-chartjs-2.

hey @iarry

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

Cheers,

from react-chartjs-2.

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

from react-chartjs-2.

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

from react-chartjs-2.

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.

from react-chartjs-2.

I have the same issue, using Pie.

from react-chartjs-2.

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 }} />

from react-chartjs-2.

I have same issue, using doughnut

from react-chartjs-2.

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

from react-chartjs-2.

May be this can help #334 (comment)

from react-chartjs-2.

@KennethChiu123

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

Thank you.

from react-chartjs-2.

data={data} width={200} height={200} options={{ maintainAspectRatio: false ,responsive:false }}

This solution worked for me but also this:
<Bar data={data} width={1900} height={900} options={{maintainAspectRatio: true, responsive: true}}/>

from react-chartjs-2.

This is the solution https://react-chartjs-2.js.org/faq/maintain-aspect-ratio/

from react-chartjs-2.