Решение проблемы изменения размера холста в Chart.js

Быстрый ответ

Для динамического изменения размеров холста Chart.js задайте параметр responsive равным true. Благодаря этому график будет автоматически подстраиваться под размер своего контейнера. Если же вам нужно изменить размеры без сохранения пропорций, установите для параметра maintainAspectRatio значение false. Вот пример настройки:

const myChart = new Chart(document.getElementById('myChart').getContext('2d'), {
  type: 'bar',
  data: {/* ... */},
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});

Размеры для чёткости: экраны Retina и с высокой плотностью пикселей

На экранах Retina и прочих с высокой плотностью пикселей изображения на холсте могут выглядеть размытыми. Решить эту проблему можно, явно указав размеры холста:

#myChart {
  width: 400px;
  height: 400px;
}

Либо задайте размеры с помощью JavaScript:

var ctx = document.getElementById('myChart').getContext('2d');
ctx.canvas.width = 400;
ctx.canvas.height = 400;

var myDpiChart = new Chart(ctx, {
  // ... код инициализации графика
});

Эти значения помогут обеспечить чёткость изображений.

Соблюдение правил компоновки

Использование div с абсолютным позиционированием

Вы сможете лучше контролировать размещение элементов, если разместите холст в div с абсолютным позиционированием:

<div style="position: relative; height:400px; width:600px">
  <canvas id="myChart"></canvas>
</div>

Подробнее об этом расскажет наш спикер на видео

Минимальное изменение высоты

Чтобы внести изменения во внешний вид, укажите свойство height непосредственно для элемента холста в HTML:

<canvas id="myChart" height="200"></canvas>

Установка максимальной высоты для контейнера

Если вы примените к контейнеру свойство max-height, это повысит стабильность:

#chart-container {
  max-height: 400px;
}

<canvas id="myChart"></canvas>

Android WebView – хитрости мастерства

В Android WebView размер холста можно регулировать, размещая его в div и задавая размеры контейнера:

<div style="width: 100%; height: 100%;">
  <canvas id="myChart"></canvas>
</div>

Визуализация

Взглянем на изменение размера:

До: 🖼️[ 📊 Маленькая диаграмма ]

После инициации изменения размера: 🖼️[ 📊📊📊 Большая диаграмма ]

// Импульс развития для вашего графика!
chartInstance.resize();

Обеспечение работоспособности во всех браузерах

Chart.js гарантирует корректность отображения графиков в разном спектре браузеров и устройств. Для этого:

• Используйте единицы размеров вьюпорта (vw, vh) для масштабирования размеров.
• Применяйте медиа-запросы для настройки под различные экраны.
• Тестируйте графики на разных устройствах.

Приоритет доступности

Диаграммы должны быть доступны не только визуально:

• Привязывайте <label> к управляющим элементам с помощью атрибута for.
• Добавьте текстовые описания к сложным диаграммам для лучшего понимания.

Полезные материалы

1. Адаптивные диаграммы | Chart.js – Официальное руководство.
2. Вопросы по 'chart.js+resize' – Stack Overflow – Решения от сообщества.
3. Полное руководство по Flexbox | CSS-Tricks – Использование Flexbox.
4. Aspect-ratio – CSS | MDN – Соотношение сторон в CSS.
5. Адаптивные диаграммы Chart.js на CodePen – Пример реализации.
6. Единицы вьюпорта на мобильных устройствах | CSS-Tricks – Адаптивный дизайн.
7. Примеры диаграмм Chart.js для начинающих | Tobias Ahlin – Советы и примеры.