Wire Range Buttons and Resize

Connect each range button to shared range state and reload the historical series.

Use the existing data-range attributes:

$("ranges").querySelectorAll("[data-range]").forEach(button => {
  button.onclick = () => {
    range = button.dataset.range;
    $("ranges").querySelectorAll("button").forEach(item =>
      item.classList.toggle("active", item === button)
    );
    loadChartData();
  };
});

Finally, redraw the canvas when the browser size changes:

window.onresize = () => drawChart(rate(from, to));

Test it

Switch between 1D, 1W, 1M, 3M, and 1Y, then resize the browser.

Checkpoint

The active range changes, the chart data refreshes, and the canvas continues to fit the panel after resizing.