Я хочу сделать адаптивный график, используя библиотеку ChartJS.Все работает нормально на экранах шире, чем ~ 430px, но при таком размере диаграмма становится настолько маленькой, что исчезает.Я хочу сделать график видимым, как на 3-м изображении
Больше чем ~ 430 пикселей:
Меньше чем ~ 430 пикселей:
Как бы я этого хотел:
РЕДАКТИРОВАТЬ: Как в настоящее времяэто выглядит так:
<div className="graph">
<Topic />
<Doughnut data={{
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.3)',
'rgba(54, 162, 235, 0.3)',
'rgba(255, 206, 86, 0.3)',
'rgba(75, 192, 192, 0.3)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
],
borderWidth: 1
}]
}}
/>
Это мой код, просто скопируйте и вставьте, чтобы проверить библиотеку.Может быть, высота и ширина по умолчанию помогут, но мне нужно, чтобы они реагировали.Как я могу настроить его на работу?
Оболочки CSS выглядят так:
.Statistics .graphContainer{
background-color: black;
background-color: rgba(0,0,0,0.75);
border: black solid;
border-width: 3px;
border-radius: 5px;
margin-top: 75px;
padding: 10px;
}
.Statistics .graph{
margin-left: 10px;
margin-top: 10px;
}
Кроме того, .graph лежит в .graphContainer