reactjs - ChartJS not resizing to be mobile friendly

Question

I am using react and i can't seem to be able to resize my graph correctly when sizing down to mobile.

I am using the library ChartJS React 2

I have tried to use responsive in the options, I just can't figure out why on mobile this isn't working for me.

The following is my code and image of my graph

Thanks in advance!

Styles:

    cardBody: {
        display: 'flex',
        flexDirection: 'column',
        [theme.breakpoints.down('sm')]: {
            flexDirection: 'column',
            alignItems: 'center',
        },
    },
    graph: {
        flex: 1,
        padding: '30px 15px',
    },

Code:

<div className={classes.cardBody}>
                <div className={classes.graph}>
                    <Line
                        data={{
                            labels: ['6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
                            datasets: [
                                {
                                    label: 'My First dataset',
                                    data: [65, 59, 80, 81, 56, 55, 40],
                                    borderColor: '#5c75dc',
                                    pointBackgroundColor: '#fff',
                                    pointBorderColor: '#5c75dc',
                                    pointHoverBackgroundColor: '#5c75dc',
                                    pointHoverBorderColor: '#fff',
                                    pointRadius: 4,
                                    pointHoverRadius: 4,
                                    fill: false,
                                },
                            ],
                        }}
                        options={{
                            responsive: true,
                            layout: {
                                padding: {
                                    top: 10,
                                    bottom: 100,
                                    left: 10,
                                    right: 10,
                                },
                            },
                            legend: {
                                display: false,
                            },
                            scales: {
                                xAxes: [
                                    {
                                        position: 'top',
                                        gridLines: { display: true, drawBorder: false, zeroLineColor: '#e2e2e2' },
                                        ticks: { display: true },
                                    },
                                ],
                                yAxes: [
                                    {
                                        gridLines: { display: false },
                                        ticks: { display: false },
                                    },
                                ],
                            },
                        }}
                    />
                </div>
            </div>

EDIT: I've removed Height and width and still not resizing working EDIT2: This seems to be a resizing issue. When entering the site on mobile browser it works fine, but when resizing the screen there seems to be issues.

Answer 1

等待大神答复