Load Historical Rates from Frankfurter

Create loadChartData() using the actual project endpoint from the finished application.

Calculate the dates, then request the selected pair:

const url = `https://api.frankfurter.dev/v2/rates?from=${iso(startDate)}&to=${iso(endDate)}&base=${encodeURIComponent(from)}&quotes=${encodeURIComponent(to)}`;
const response = await fetch(url, { cache: "no-store" });
const data = await response.json();

Map the returned rows into the shape the chart will draw:

const rows = (Array.isArray(data) ? data : [])
  .filter(row => row.quote === to && Number.isFinite(row.rate))
  .map(row => ({ date: row.date, value: Number(row.rate) }))
  .sort((a, b) => a.date.localeCompare(b.date));

The final project also adds today’s current live rate when needed so the chart ends at the same rate shown by the converter.

Test it

Watch the Network panel while switching ranges.

Checkpoint

chartData contains real dated rate points for the current currency pair; it is not generated from random values.