Построить график, используя json данные js

Этот пример рисует график используя данные удалённого файла в формате json:

async function fetchData() {
    const url = 'https://mysynthesizer.github.io/index.hetemeel/json.json';
    const response = await fetch(url);
    const datapoints = await response.json();
    ctx.beginPath();
    ctx.moveTo(0, datapoints[0].rate * 3);
    for(i = 1; i < datapoints.length; i ++){
        ctx.lineTo(i * 30, 200 - datapoints[i].rate * 3);
    }
    ctx.stroke();
}
fetchData();
let ctx = document.querySelector('canvas').getContext('2d');

<canvas width=270 height=200 style='border-style: solid'><canvas>

Содержимое удалённого файла json.json:

[
    { 
        "date": 17, "rate": 27.12
    },{
        "date" :18, "rate": 28.55
    },{ 
        "date": 19, "rate": 30.72
    },{
        "date": 20, "rate": 33.43
    },{ 
        "date": 21, "rate": 31.12
    },{
        "date": 22, "rate": 29.22
    },{ 
        "date": 23, "rate": 25.12
    },{
        "date": 24 ,"rate": 23.88
    },{ 
        "date": 25, "rate": 24.76
    },{
        "date": 26, "rate": 24.22
    }
]

Дополняю ответ после изменения вопроса. Да, наличие украиноязычных ключей немножко вызвало проблему, но из такого всегда можно выкрутиться. В данном случае ответ сервера нужно получить не в виде json(), а в виде текста. Потом заменить в этом тексте все украинские выражения на английские, в данном случае Дата и Офіційний курс гривні, грн соответственно, скажем, на date и rate. После этого остаётся преобразовать весь текст, который получился, в массив json() и дальше всё по плану.

async function fetchData() {
    const url = 'https://[Ваш json(), который на скриншоте]';
    const response = await fetch(url);
    const text_ua = await response.text();
    const text_en = text_ua.replaceAll('Дата', 'date').replaceAll('Офіційний курс гривні, грн', 'rate');
    const datapoints = JSON.parse(text_en);
    const step = 300 / (datapoints.length - 1);
    ctx.beginPath();
    ctx.moveTo(0, datapoints[0].rate * 3);
    for(i = 1; i < datapoints.length; i ++){
        ctx.lineTo(Math.floor(i * step), 200 - datapoints[i].rate * 3);
    }
    ctx.stroke();
}
fetchData();
let ctx = document.querySelector('canvas').getContext('2d');

<canvas width=300 height=200 style='border-style: solid'><canvas>

В общем, я состыковал Ваш вопрос и мой первый ответ. Используйте JS-код ниже, а HTML и CSS-коды оставьте такими, как были в вопросе.

async function fetchData() {
    const url = 'https://mysynthesizer.github.io/index.hetemeel/json3.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: 'Dollars', 
                data: dollars,
                backgroundColor: [
                    'rgba(255, 26, 104, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(0, 0, 0, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 26, 104, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(0, 0, 0, 1)'
                ],
                borderWidth: 1
            },
            {
                label: "Euro",
                data: euro,
                fill: false,
                borderColor: "#742774",
                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();

Содержимое файла json3.json:

[
    { 
        "date": 17, "usd": 27.12, "eur": 25.42
    },{
        "date" :18, "usd": 28.55, "eur": 23.18
    },{ 
        "date": 19, "usd": 30.72, "eur": 22.17
    },{
        "date": 20, "usd": 33.43, "eur": 22.09
    },{ 
        "date": 21, "usd": 31.12, "eur": 18.82
    },{
        "date": 22, "usd": 29.22, "eur": 25.77
    },{ 
        "date": 23, "usd": 25.12, "eur": 27.22
    },{
        "date": 24 ,"usd": 23.88, "eur": 33.45
    },{ 
        "date": 25, "usd": 24.76, "eur": 34.24
    },{
        "date": 26, "usd": 24.22, "eur": 31.01
    }
]

Правда, кнопка Fetch теперь не очень нужна, так как график рисуется по ходу загрузки страницы.