React-chartjs-2: Sizing issue when placed in a flexbox

Created on 13 Mar 2017  路  3Comments  路  Source: reactchartjs/react-chartjs-2

Finding that when charts are placed in a flexbox they are using the window size rather then the divs(flexbox) size. Any way around this?

Most helpful comment

Had the same problem with flexible div height. Solved it by wrapping the chart in a static div.

<div style={{ width: 300, height: 300 }}>
    <Doughnut data={data} width={250} height={300} options={{ maintainAspectRatio: false }} />
 </div>

All 3 comments

The charts also seem to move around on their own upon window resizing. Very mysterious.

Had the same problem with flexible div height. Solved it by wrapping the chart in a static div.

<div style={{ width: 300, height: 300 }}>
    <Doughnut data={data} width={250} height={300} options={{ maintainAspectRatio: false }} />
 </div>

Closing for now. Please supply a sandbox or code example with the latest versions of both libraries. If the problem persists, feel free to open a new issue.

Was this page helpful?
0 / 5 - 0 ratings