{"id":30055,"date":"2026-04-24T06:19:21","date_gmt":"2026-04-24T06:19:21","guid":{"rendered":"urn:uuid:d85f3d11-4405-4b91-aaf3-14811eb97c6e"},"modified":"2026-04-24T06:19:22","modified_gmt":"2026-04-24T06:19:22","slug":"fetching-real-data-for-highcharts-in-react-using-useeffect","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/fetching-real-data-for-highcharts-in-react-using-useeffect\/","title":{"rendered":"Fetching Real Data for Highcharts in React using useEffect"},"content":{"rendered":"\n

In the previous post (Dynamic Charts in React using useState with @highcharts\/react<\/a>), I used useState<\/code> to update a chart with hardcoded data. In this post, I go one step further, fetching real data from an API and rendering it in a chart using useEffect<\/code>.<\/p>\n

This is the pattern behind every real dashboard: data arrives after the component loads, the chart waits, then renders.\n<\/p>\n\n\n\n

What you will build<\/strong><\/h2>\n\n\n\n

A line chart that fetches USD to EUR exchange rate historical data from a remote API and renders it automatically when the component mounts.<\/p>\n\n\n\n

Prerequisites<\/strong><\/h2>\n\n\n\n
    \n
  • Node.js installed (node -v to check)<\/li>\n\n\n\n
  • Basic knowledge of React<\/li>\n<\/ul>\n\n\n\n

    Setting up the project<\/strong><\/h2>\n\n\n\n

    Create a new React project using Vite:<\/p>\n\n\n\n

    npm create vite@latest . -- --template react\n\n\n<\/code><\/pre>\n\n\n\n
    Install Highcharts:
    <\/p>\n\n\n\n
    npm install @highcharts\/react\n<\/code><\/pre>\n\n\n\n
    Start the dev server:
    <\/p>\n\n\n\n
    npm run dev\n<\/code><\/pre>\n\n\n\n
    Open http:\/\/localhost:5173 in your browser.<\/p>\n\n\n\n
    Your first chart with real data<\/strong><\/h2>\n\n\n\n
    Open src\/App.jsx, delete everything and replace it with:<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    \n
    import { useState, useEffect } from 'react'\nimport { Chart } from '@highcharts\/react'\nimport { XAxis } from '@highcharts\/react'\nimport { LineSeries } from '@highcharts\/react\/series\/Line'\n\nfunction App() {\n  const [data, setData] = useState([])\n\n  useEffect(() => {\n    fetch('https:\/\/cdn.jsdelivr.net\/gh\/highcharts\/highcharts@latest\/samples\/data\/usdeur.json')\n      .then(response => response.json())\n      .then(data => setData(data))\n  }, [])\n\n  return (\n    <Chart>\n      <XAxis type=\"datetime\" \/>\n      <LineSeries data={data} \/>\n    <\/Chart>\n  )\n}\nexport default App<\/code><\/pre>\n\n\n\n