Как сделать график chart.js посередине экрана?

Пользователь

от roma , в категории: JavaScript , 8 месяцев назад

Как сделать график chart.js посередине экрана?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от keyon.brown , 7 месяцев назад

@roma 

Чтобы разместить график Chart.js посередине экрана, можно использовать CSS для настройки макета.


Вот пример кода, который поможет разместить график посередине экрана:


HTML:

1
2
3
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>


CSS:

1
2
3
4
.chart-container {
  width: 50%;
  margin: 0 auto;
}


Этот код задает ширину контейнера графика на 50% ширины экрана и устанавливает автоматическое горизонтальное выравнивание для центрирования контейнера на странице.


Кроме того, если вы хотите, чтобы график был также посередине вертикально, вы можете добавить вертикальное выравнивание:

1
2
3
4
5
6
7
.chart-container {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}


Этот код использует свойства display: flex, justify-content: center и align-items: center, чтобы выровнять элементы по центру как по горизонтали, так и по вертикали.