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>