Building an Economic Blocs Map with Highcharts React

Highcharts has released a new React integration that makes working with data visualizations more straightforward. The new @highcharts/react package offers improved component integration, full ESM support, and an API that aligns better with React patterns.

In this tutorial, I will walk you through building an interactive map of all economic blocs and their member countries, a practical example that demonstrates how the new integration works. If you haven’t migrated to the new Highcharts React yet, I invite you to take a look at this short article on how to migrate to the new Highcharts for React.

Let’s get started 🙂

What the app does

• Pick an economic bloc from a custom dropdown.
• Highlights member countries on a world map.
• Shows quick stats: GDP, population, founding year, member count.

What you need to achieve this app 

• React 18
• Highcharts 12+ with @highcharts/react
• Topojson fallback: @highcharts/map-collection/custom/world.topo.json

Feel free to try it out:
Link to the demo CodeSandbox

The architecture is very straight forward:

App

├─ BlocDropdown (uses useOutsideClick)

├─ BlocInfo

│  └─ StatCard

└─ MapChart

Here is some information about the elements:

• App: holds selected bloc, computes series data, coordinates children.
• BlocDropdown: custom selector with outside-click close.
• BlocInfo: bloc stats panel using StatCard.
• MapChart: Highcharts map renderer.

Before I dive into the code, let’s understand what makes the new @highcharts/react way better than the old one, this will help you follow along more easily.

Understanding the new @highcharts/react approach

The new @highcharts/react package brings two major improvements over the old highcharts-react-official:
1. Component-based & Declarative Instead of passing a highcharts prop everywhere, you import specialized components like MapsChart and MapSeries. Your React code stays clean and declarative:

<MapsChart chartConstructor="mapChart" options={mapOptions}>

  <MapSeries options={{ mapData, data: seriesData, joinBy: 'hc-key' }} />

</MapsChart>

2. One-time Initialization You initialize Highcharts modules once in a setup file, then every component in your app just works, no repeated configuration.

Setting up Highcharts once

The key to making maps work throughout your app is a one-time setup file. Create src/lib/highchartsSetup.js:

import Highcharts from ‘highcharts’;
import mapModule from ‘highcharts/modules/map.js’;
import { setHighcharts } from ‘@highcharts/react’;
import worldMap from ‘@highcharts/map-collection/custom/world.topo.json’;
// Initialize the map module
const mapFactory = mapModule && (mapModule.default || mapModule);
if (typeof mapFactory === ‘function’) mapFactory(Highcharts);
// Register the bundled topojson for offline fallback
Highcharts.maps = Highcharts.maps || {};
Highcharts.maps[‘custom/world’] = worldMap;
// Hand the configured instance to @highcharts/react
setHighcharts(Highcharts);
export { Highcharts, worldMap };

What’s happening here?

1. Import Highcharts and the map module
2. Run the map module to add map support to Highcharts
3. Bundle the world topojson from @highcharts/map-collection and register it under 'custom/world'
4. Call setHighcharts() to give this configured instance to all @highcharts/react components
5. Export everything so other files can use it if needed

This setup runs once when your app loads. After that, every MapsChart and MapSeries component has map support and topojson baked in. No need to pass Highcharts as a prop or repeat this configuration.

Bonus

I am enabling Offline Fallback. By bundling the topojson, the map works even when the CDN is unreachable. The useMapData hook (which you will see in the data flow) will try fetching the latest topojson from the Highcharts CDN first, but if that fails, it falls back to this bundled version. The topojson itself lives at node_modules/@highcharts/map-collection/custom/world.topo.json.

Data flow overview

Now that setup is handled, let’s see how data moves through the app:

1. Economic blocs data lives in src/economicBlocs.js (name, GDP, population, founded year, ISO country codes)
2. App component holds the selected bloc and computes seriesData (which countries to highlight)
3. useMapData hook fetches topojson from the Highcharts CDN with the bundled JSON as fallback
4. MapChart receives mapData and seriesData, then renders the map using MapsChart and MapSeries
5. BlocInfo displays four StatCard components showing GDP, population, founding year, and member count

With this flow in mind, let’s look at the heart of the app: the MapChart component.

Building MapChart.jsx

MapChart is where the React app actually renders the map using @highcharts/react. Let’s break it down step by step.

Import the map-specific React wrappers:

const mapOptions = {
  chart: { 
    backgroundColor: ‘#1a1a1a’, 
    animation: false 
  },
  tooltip: {
    formatter: function() { return this.point.name; },
    backgroundColor: ‘#1a1a1a’,
    borderColor: ‘#00bcd4’,
    style: { color: ‘white’ }
  },
  colorAxis: {
    min: 0, 
    max: 1,
    stops: [[0, ‘#2a2a2a’], [1, ‘#ff6b6b’]],
    visible: false
  }
};

Build the component: The component expects mapData (topojson) and seriesData (the selected bloc’s countries):

function MapChart({ mapData, seriesData }) {
  return (
    <div style={{ maxWidth: '800px', margin: '20px auto', padding: '0 20px' }}>
      <MapsChart chartConstructor="mapChart" options={mapOptions}>
        <MapSeries options={{
          mapData,
          name: 'Countries',
          data: seriesData,
          joinBy: 'hc-key',
          nullColor: '#2a2a2a',
          borderColor: '#555555',
          borderWidth: 1
        }} />
      </MapsChart>
    </div>
  );
}

How it works:

• <MapsChart chartConstructor="mapChart" options={mapOptions}> sets up the map chart container with our dark theme and tooltip
• The nested <MapSeries> component does the heavy lifting:
  • mapData: the topojson defining country boundaries
  • data: the array of highlighted countries (seriesData)
  • joinBy: 'hc-key': matches our data to the topojson using Highcharts country keys
  • nullColor: color for unselected countries
  • borderColor/borderWidth: country borders

Because I ran the setup file earlier, this component has everything it needs. No highcharts prop, no module initialization, just clean, declarative React.

Wrapping up

You now know how to create an interactive map with the new @highcharts/react. The key takeaways:

1. Set up once in highchartsSetup.js with modules and topojson
2. Use components like MapsChart and MapSeries for declarative rendering
3. Bundle topojson for offline fallback via @highcharts/map-collection
4. Keep it simple let the setup file handle initialization, and let your components focus on rendering

The new @highcharts/react makes maps easier to work with in React apps.