Метки ввиде месяцев вместо дат на графике

Как изменить метки по оси х на месяцы, чтобы вместо дат, показывало месяцы, а уже когда наводишь на какую-то точку на графике, вот что бы там уже показывало конкретную дату? Файл json с данными я прикрепляю тут https://jsfiddle.net/andrewphoenix228/6aeyLp3s/1/, поскольку он очень большой и слишком много данных было бы на страницу, поэтому я его решил поместить в онлайн редактор.

async function fetchData() {
    const url = 'currency.json';
    const response = await fetch(url);
    const datapoints = await response.json();
    console.log(datapoints);
    const dates = [];
    const dollars = [];
    const euro = [];
    for (i = 0; i < datapoints.length; i++) {
        dates[i] = datapoints[i].date;
        dollars[i] = datapoints[i].usd;
        euro[i] = datapoints[i].eur;
    }
    const data = {
        labels: dates,
        datasets: [
            {
                label: "Euro",
                data: euro,
                borderColor: "#FF9800",
                borderWidth: 1
            },
            {
                label: 'Dollars', 
                data: dollars,
                borderColor: '#42A5F5',
                borderWidth: 1
            }
        ]
    };

    // config 
    const config = {
        type: 'line', 
        data,
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    };

    // render init block
    const myChart = new Chart(
        document.getElementById('myChart'),
        config,
    );
};
fetchData();
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  .chartCard {
    width: 100vw;
    height: calc(100vh - 1px);  
    background-color:#1abc9c;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chartBox {
    width: 1000px;
    padding: 20px;
    border-radius: 20px;
    border: solid 3px #212121;
    background: white;
  }
  
<!Doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Currency Chart</title>
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>    
        <div class="chartCard">
          <div class="chartBox">
            <canvas id="myChart"></canvas>
          </div>
        </div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="script.js"></script>   
      </body>
    </html>


Ответы (1 шт):

Автор решения: Jean-Claude

Похоже, что заголовок оси Х и заголовок всплывающего окошка (при наведении курсора мышки на точку графика) взаимосвязаны, данные берутся из одного массива. Но с помощью плагина tooltip можно изменить текст label всплывающего окошка примерно таким кодом.

Сразу сделал ось с выводом только года.

let somedata = [{
    "date": "04.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.2808
  },
  {
    "date": "05.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.2808
  },
  {
    "date": "06.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.3876
  },
  {
    "date": "07.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.389
  },
  {
    "date": "08.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.1901
  },
  {
    "date": "09.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.411
  },
  {
    "date": "10.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.3934
  },
  {
    "date": "11.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.3934
  },
  {
    "date": "12.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 31.3934
  },
  {
    "date": "13.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.9327
  },
  {
    "date": "14.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.5626
  },
  {
    "date": "15.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.567
  },
  {
    "date": "16.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.5962
  },
  {
    "date": "17.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.3885
  },
  {
    "date": "18.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.3885
  },
  {
    "date": "19.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.3885
  },
  {
    "date": "20.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.6899
  },
  {
    "date": "21.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.7952
  },
  {
    "date": "22.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.861
  },
  {
    "date": "23.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.7542
  },
  {
    "date": "24.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.7337
  },
  {
    "date": "25.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.7337
  },
  {
    "date": "26.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.7337
  },
  {
    "date": "27.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.7674
  },
  {
    "date": "28.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.9122
  },
  {
    "date": "29.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.9151
  },
  {
    "date": "30.06.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.7776
  },
  {
    "date": "01.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.4017
  },
  {
    "date": "02.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.4017
  },
  {
    "date": "03.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.4017
  },
  {
    "date": "04.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.526
  },
  {
    "date": "05.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.5816
  },
  {
    "date": "06.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 30.1135
  },
  {
    "date": "07.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.8122
  },
  {
    "date": "08.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.8107
  },
  {
    "date": "09.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.8107
  },
  {
    "date": "10.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.8107
  },
  {
    "date": "11.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.701
  },
  {
    "date": "12.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.5109
  },
  {
    "date": "13.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.3675
  },
  {
    "date": "14.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.4494
  },
  {
    "date": "15.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.2754
  },
  {
    "date": "16.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.2754
  },
  {
    "date": "17.07.2022",
    "Час": "00.00",
    "Код цифровий": 978,
    "Код літерний": "EUR",
    "Кількість одиниць": 1,
    "Назва валюти": "Євро",
    "eur": 29.2754
  },
  {
    "date": "23.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 27.1915
  },
  {
    "date": "24.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 27.1915
  },
  {
    "date": "25.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 27.1915
  },
  {
    "date": "26.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 27.048
  },
  {
    "date": "27.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.9805
  },
  {
    "date": "28.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.906
  },
  {
    "date": "29.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8628
  },
  {
    "date": "30.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8867
  },
  {
    "date": "31.07.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8867
  },
  {
    "date": "01.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8867
  },
  {
    "date": "02.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8168
  },
  {
    "date": "03.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8444
  },
  {
    "date": "04.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8411
  },
  {
    "date": "05.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.9094
  },
  {
    "date": "06.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.9395
  },
  {
    "date": "07.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.9395
  },
  {
    "date": "08.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.9395
  },
  {
    "date": "09.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8346
  },
  {
    "date": "10.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8011
  },
  {
    "date": "11.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.7557
  },
  {
    "date": "12.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.8042
  },
  {
    "date": "13.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.7686
  },
  {
    "date": "14.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.7686
  },
  {
    "date": "15.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.7686
  },
  {
    "date": "16.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6931
  },
  {
    "date": "17.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6457
  },
  {
    "date": "18.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6752
  },
  {
    "date": "19.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6455
  },
  {
    "date": "20.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6504
  },
  {
    "date": "21.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6504
  },
  {
    "date": "22.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6504
  },
  {
    "date": "23.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6504
  },
  {
    "date": "24.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6504
  },
  {
    "date": "25.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.6718
  },
  {
    "date": "26.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.7074
  },
  {
    "date": "27.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.7744
  },
  {
    "date": "28.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.929
  },
  {
    "date": "29.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.929
  },
  {
    "date": "30.08.2021",
    "Час": "00.00",
    "Код цифровий": 840,
    "Код літерний": "USD",
    "Кількість одиниць": 1,
    "Назва валюти": "Долар США",
    "usd": 26.929
  }
];

let month = {
  "01": "январь",
  "02": "февраль",
  "03": "март",
  "04": "апрель",
  "05": "май",
  "06": "июнь",
  "07": "июль",
  "08": "август",
  "09": "сентябрь",
  "10": "октябрь",
  "11": "ноябрь",
  "12": "декабрь",
}

async function fetchData() {
  //у меня somedata массив с данными объявлен выше
  //ты получаешь этот массив фетчем
  //const datapoints = fetch().json();
  const datapoints = somedata;
  const dates = [];
  const dollars = [];
  const euro = [];
  for (i = 0; i < datapoints.length; i++) {
    //обрезаю дату, оставляя только лишь месяц
    //затем из подготовленнго объекта месяцев выбираю нужный
    dates[i] = month[datapoints[i].date.substring(3, 5)];
    dollars[i] = datapoints[i].usd;
    euro[i] = datapoints[i].eur;
  }
  const data = {
    labels: dates,
    datasets: [{
        label: "Euro",
        data: euro,
        borderColor: "#FF9800",
        borderWidth: 1
      },
      {
        label: 'Dollars',
        data: dollars,
        borderColor: '#42A5F5',
        borderWidth: 1
      }
    ]
  };

  // config 
  const config = {
    type: 'line',
    data,
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      //подключаю плагин tooltip
      plugins: {
        tooltip: {
          callbacks: {
            label: function(context) {

              let label = context.dataset.label || '';
              if (label) {
                label += ': ';
              }
              if (context.parsed.y !== null) {
                label += context.parsed.y;
              }

              if (context.dataIndex !== null) {
                //у точки графика есть нумерованный ключ
                //совпадающий с индексом массива datapoints=somedata
                //поэтому берем необходимые данные из datapoints
                label += ` (${datapoints[context.dataIndex].date})`;
              }
              return label;
            }
          }
        }
      }
    }
  };

  // render init block
  const myChart = new Chart(
    document.getElementById('myChart'),
    config,
  );
};
fetchData();
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.chartCard {
  width: 100vw;
  height: calc(100vh - 1px);
  background-color: #1abc9c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chartBox {
  width: 1000px;
  padding: 20px;
  border-radius: 20px;
  border: solid 3px #212121;
  background: white;
}
<!Doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Currency Chart</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="chartCard">
    <div class="chartBox">
      <canvas id="myChart"></canvas>
    </div>
  </div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>

</html>

→ Ссылка