Сделаем все то же самое, но в этот раз - на реакте. В качестве результата получим одностраничный статичный сайт, который, в отличие от написанного на Ruby или PHP, мы абсолютно бесплатно зальем на хостинг GitHub в качестве живого демо.

Highcharts с webpack или sprockets на Ruby on Rails

Последнюю ревизию кода всегда возможно найти в моем GitHub, репозиторий носит название Open-Exchange-Rates-API-React-Wrapper. Здесь же остановлюсь только на одном моменте, а именно: коллизии, которую вызывает некорректное использование useEffect. Если сделаем кое-как, что-нибудь в стиле, как показано, далее, это будет иметь следующие последствия: чарт будет работать и в консоли не будет заметно никаких ошибок, но только до первого клика по legend. А далее чарт обрушится:

  const [apiData, setApiData] = useState({});
  
  useEffect(() => {
    fetch(url, {
      method: "GET",
      headers: {
        accept: "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => setApiData(data));
  });

TypeError: Cannot read properties of undefined (reading 'layout')

Чтобы этого не произошло, используем useEffect правильно. Например, следующим образом:

  const [apiData, setApiData] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetch(url, {
        method: "GET",
        headers: {
          accept: "application/json",
        },
      })
        .then((res) => res.json())
        .then((data) => setApiData(data));

      return data;
    };
    fetchData();
  }, []);

Вот как-то так. Если есть дельные замечания по теме - не стесняйтесь прокомментировать сказанное здесь или на форуме.