{"id":30628,"date":"2026-05-21T13:25:46","date_gmt":"2026-05-21T13:25:46","guid":{"rendered":"urn:uuid:562e6179-d06a-4610-86ba-cf649df02270"},"modified":"2026-05-21T13:25:47","modified_gmt":"2026-05-21T13:25:47","slug":"build-a-single-page-application-with-highcharts-react","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/build-a-single-page-application-with-highcharts-react\/","title":{"rendered":"Build a Single Page Application with Highcharts React"},"content":{"rendered":"\n
\n
\n

In this tutorial we will build a simple React web app that fetches data from static JSON files and uses that data to create a chart using Highcharts React. We are doing this to mimic fetching data from the server in a Single Page Application (SPA) setting.<\/p>\n\n\n\n

We will learn what an SPA actually is, why on-demand data fetching is a defining feature, and how Highcharts fits into that pattern.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

What is A Single Page Application?<\/h2>\n\n\n\n
\n

In a traditional website, every time you click a link or submit a form, the browser makes a request to the server, which sends back a brand new HTML page. This means that the current page is discarded and the new one is rendered from scratch.<\/p>\n\n\n\n

An SPA works differently. The browser first loads the web page, but from that point on, the page never fully reloads. When the user interacts with the app, JavaScript handles the updates needed for the resulting view with minimal server-side involvement. The general idea is to keep as much as possible on the client side, and fetch only the data that is needed to load the new page view.<\/p>\n\n\n\n

This is what keeps SPAs responsive: you don\u2019t reload the page, you only fetch what you need, when you need it.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

How Highcharts Fits In<\/h2>\n\n\n\n
\n

Highcharts is a client-side charting library that renders interactive charts directly in the browser, which makes it a natural fit for SPAs where charts update without reloading the page.<\/p>\n\n\n\n

In an SPA, Highcharts is loaded along with the rest of your app on initial page load. When new data arrives from an API, you pass it to your chart component and it updates instantly. No need for a page reload.<\/p>\n\n\n\n

In this tutorial we will build a simple demo that demonstrates this pattern:<\/p>\n\n\n\n