size of chart is too small

[tduraes]

hey, so im tryying to implement this solution but i cant seem to figure out how to make the charts larger here's chart.jsx

`import React, {useState, useEffect } from 'react'; import {fetchDailyData} from '../../api'; import { Line, Bar } from 'react-chartjs-2';

import styles from './Chart.module.css';

const Chart = ({data:{confirmed, recovered, deaths}, country}) => { const [dailyData, setDailyData] =useState([]);

useEffect( () => {
    const fetchAPI = async () => {
        setDailyData(await fetchDailyData());
    }

    fetchAPI();
}, [])

const barChart = (
    confirmed
        ? (
            <Bar 
                data = {{
                    labels: ['Infetados','Recuperados','Mortes'],
                    datasets: [{
                        label: 'Pessoas',
                        backgroundColor: [
                            'rgba(0,0,255,0.5)',
                            'rgba(0,255,0,0.5)',
                            'rgba(255,0,0,0.5)',
                        ],
                    data : [confirmed.value, recovered.value, deaths.value]
                    }]
                 }}
                options= {{
                    legend: {display: false},
                    title: {display: true, text: `Estado atual em ${country}`},
                }}
            />
        ) : null
)

const lineChart = (
    dailyData.length
        ? (
        <Line 
        data={{
            labels: dailyData.map(({ date })=> date),
            datasets: [ {
                data: dailyData.map(({confirmed})=>confirmed),
                label: 'Infetados',
                borderColor: '#3333ff',
                fill: true,
            }, {
                data: dailyData.map(({deaths}) => deaths),
                label: 'Mortos',
                borderColor: 'red',
                backgroundColor: 'red',
                fill: true,
            } ],
        }} 
    />) : null
);

return (
    <div className={styles.container} >
        {country ? barChart : lineChart} 
    </div>
    )

}

export default Chart;`

here's Chart.module.css

.containter { display: flex; justify-content: center; width: 85%; }

hope you can help me , thanks for the amazing work man !

[hitvaghani26]

I found that we have to give inline CSS I don't know why but it works.
change scr/chart/Chart.jsx in line 74 (return statement) return ( <div className={styles.container} style={{ width: '100%' }}> {country ? barChart : lineChart} </div> ); };

I hope it will work for you>