Стандартная структура HTML-структура для Chart.js:

<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Charts</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
  <div id="app">
    <div class="container">
      <h1 class="app__h1 app-h1">Chart</h1>
      <div class="app__chart app-chart">
    
        <!-- нас интересует данная часть -->
        <div class="app-chart__canvas">
          <canvas class="chart"></canvas>
        </div>

      </div>
    </div>
  </div>
  
  <script src="js/chart.min.js"></script> <!-- подключаем плагин -->
  <script src="js/main.js"></script>
  
  </body>
</html>


CSS

Стандартные стили

body {
  font-family: 'Rubik', sans-serif;
  color: #333;
  background: #fff;
}
.container {
  padding: 0 32px;
}
.app-h1 {
  text-align: center;
}
.app-chart__canvas {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}


JavaScript

Плагин с минимальными настройками

document.addEventListener('DOMContentLoaded', () => { // структура документа загружена   
  
  new Chart( // инициализируем плагин
    document.querySelector('.chart'), // первым параметром передаем элемент canvas по селектору
    // вторым параметром передаем настройки в виде объекта
    { 
      type: 'line', // тип графика, в данном случае линейный
      data: { // общие данные графика в виде объекта
        labels: ['April', 'May', 'June', 'July', 'August'], // метки по оси X
        datasets: [ // набор данных, который будет отрисовываться в виде массива с объектами
          { 
              label: 'Books read', // название для определенного графика в виде строки
              data: [3, 6, 2, 7, 4] // данные в виде массива с числами, количество должно совпадать с количеством меток по оси X
          }
        ]
      },
      options: {} // дополнительные опции для графика в виде объекта, если не нужны - передаем пустой объект
    }
  );

})




Добавить цвет для линий

document.addEventListener('DOMContentLoaded', () => {

  new Chart(
    document.querySelector('.chart'),
    {
      type: 'line',
      data: {
        labels: ['April', 'May', 'June', 'July', 'August'],
        datasets: [
          {
              label: 'Books read',
              data: [3, 6, 2, 7, 4],
              borderColor: 'crimson' // назначаем цвет для линий в виде строки
          }
        ]
      },
      options: {}
    }
  );

})



Изменим ширину линий

document.addEventListener('DOMContentLoaded', () => {

  new Chart(
    document.querySelector('.chart'),
    {
      type: 'line',
      data: {
        labels: ['April', 'May', 'June', 'July', 'August'],
        datasets: [
          {
              label: 'Books read',
              data: [3, 6, 2, 7, 4],
              borderColor: 'crimson',
              borderWidth: 5 // назначаем ширину линий
          }
        ]
      },
      options: {}
    }
  );

})



Изменим тип графика на 'bar'

document.addEventListener('DOMContentLoaded', () => {

  new Chart(
    document.querySelector('.chart'),
    {
      type: 'bar', // изменили тип графика
      data: {
        labels: ['April', 'May', 'June', 'July', 'August'],
        datasets: [
          {
              label: 'Books read',
              data: [3, 6, 2, 7, 4],
              borderColor: 'crimson',
              borderWidth: 5
          }
        ]
      },
      options: {}
    }
  );

})



Добавить столбцам фоновый цвет

document.addEventListener('DOMContentLoaded', () => {

  new Chart(
    document.querySelector('.chart'),
    {
      type: 'bar',
      data: {
        labels: ['April', 'May', 'June', 'July', 'August'],
        datasets: [
          {
              label: 'Books read',
              data: [3, 6, 2, 7, 4],
              borderColor: 'crimson',
              borderWidth: 5,
              backgroundColor: 'crimson' // назначаем столбцам фон
          }
        ]
      },
      options: {}
    }
  );

})



Сглаживание углов

document.addEventListener('DOMContentLoaded', () => {

  new Chart(
    document.querySelector('.chart'),
    {
      type: 'line', // вернули линейный тип
      data: {
        labels: ['April', 'May', 'June', 'July', 'August'],
        datasets: [
          {
              label: 'Books read',
              data: [3, 6, 2, 7, 4],
              borderColor: 'crimson',
              borderWidth: 5,
              backgroundColor: 'crimson',
              cubicInterpolationMode: 'monotone' // добавили сглаживание углов
          }
        ]
      },
      options: {}
    }
  );

})



Залить линейный график цветом

document.addEventListener('DOMContentLoaded', () => {

  new Chart(
    document.querySelector('.chart'),
    {
      type: 'line',
      data: {
        labels: ['April', 'May', 'June', 'July', 'August'],
        datasets: [
          {
              label: 'Books read',
              data: [3, 6, 2, 7, 4],
              borderColor: 'crimson',
              borderWidth: 5,
              backgroundColor: 'crimson',
              cubicInterpolationMode: 'monotone',
              fill: true // залили линейный график цветом
          }
        ]
      },
      options: {}
    }
  );

})




По оси Y график начинался с нуля

document.addEventListener('DOMContentLoaded', () => {

  new Chart(
    document.querySelector('.chart'),
    {
      type: 'line',
      data: {
        labels: ['April', 'May', 'June', 'July', 'August'],
        datasets: [
          {
            label: 'Books read',
            data: [3, 6, 2, 7, 4],
            borderColor: 'crimson',
            borderWidth: 5,
            backgroundColor: 'crimson',
            cubicInterpolationMode: 'monotone',
            fill: true
          }
        ]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true // назначили оси Y начинать отсчет с нуля
          }
        }
      }
    }
  );

})



Еще один график с другими значениями и цветом

document.addEventListener('DOMContentLoaded', () => {

  new Chart(
    document.querySelector('.chart'),
    {
      type: 'line',
      data: {
        labels: ['April', 'May', 'June', 'July', 'August'],
        datasets: [
          {
            label: 'Books read',
            data: [3, 6, 2, 7, 4],
            borderColor: 'crimson',
            borderWidth: 5,
            backgroundColor: 'crimson',
            cubicInterpolationMode: 'monotone',
          },
          // добавили еще один график с другими значениями и цветом
          {
            label: 'Books bought',
            data: [5, 2, 3, 1, 4],
            borderColor: 'teal',
            borderWidth: 5,
            backgroundColor: 'teal',
            cubicInterpolationMode: 'monotone'
          }
        ]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    }
  );

})



Источник: https://frontips.ru/sozdayom-grafiki-na-osnove-plagina-chart-js/