Small multiples map with Highcharts and React

Posted by Mustapha Mekhatria | 0 comments

Post categories:

Small multiples map with Highcharts and React

In this blog post, I will explore how to utilize Highcharts and React to create a small multiple map that visualizes the historical population of Ireland over different years (wikipedia data source).
The final demo is shown below:

Using React and Highcharts Maps to show Irish small multiple map

In the world of data visualization, effectively mapping geographical data can provide insightful views into trends, distributions, and patterns that might not be immediately apparent from raw data alone. This is where small multiples come in handy. A series of similar graphs or maps allows the reader to compare them easily.

Let’s dive into the code to see how to create such a chart in 5 simple steps.

1. Setting Up the Project

To start, ensure you have React set up for your project. For simplicity, I use the Create React App to set up my application. Alongside React, I use the Highcharts React official wrapper to integrate Highcharts with React applications.

npx create-react-app my-map-app
cd my-map-app
npm install highcharts highcharts-react-official

2. Creating the Components

The application’s core lies in two primary components: Chart and Title.

  • Title Component: Displays the heading and source of the data set.
  • Chart Component: Handles the rendering of the maps.

3. Title Component

The Title component is straightforward. It consists of an HTML structure that displays the main heading and a citation for the data source.

import "./Title.css";

function Title() {
  return (
    <div className="title">
       <h1>Historical population of Ireland </h1>
       <h2>
        Source:  <a href="https://en.wikipedia.org/wiki/Historical_population_of_Ireland" target="blank" rel="noopener">Wikipedia </a>
       </h2>
     </div>
  );
}
export default Title;

4. Chart Component

The Chart component is where the magic happens. I leverage Highcharts React official wrapper and Highcharts’ mapping capabilities to create my small multiple Irish maps. The component iterates over an array of maps (arrMaps), each representing a different year and its corresponding population data.

// Chart.jsx
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts/highmaps";
import irelandMap from "@highcharts/map-collection/countries/ie/ie-all.topo.json";
import "./Chart.css";

// Base options for the Highcharts map
const baseOptions = { /* Highcharts configuration */ };

// Array containing map data for different years
const arrMaps = [ /* Array of map configurations */ ];

function Chart() {
  return (
    <div className="charts-container center">
      {arrMaps.map((map, i) => (
        <div className="chart" key={i}>
          <HighchartsReact
            highcharts={Highcharts}
            options={{
              ...baseOptions,
              title: map.title,
              series: [{ ...baseOptions.series[0], data: map.data }],
            }}
            constructorType={"mapChart"}
          />
        </div>
      ))}
    </div>
  );
}

export default Chart;

This setup allows me to generate multiple map instances within the same view, each configured with its own data set. This makes comparing population changes across different years easy.

5. Bringing It All Together

In my App.js, I put together the Title and Chart components, arranging them within a main container. This structure serves as the backbone of my application’s layout.

// App.js
import "./App.css";
import Title from "./components/Title/Title";
import Chart from "./components/Chart/Chart";

function App() {
  return (
    <div className="app-container">
      <Title />
      <Chart />
    </div>
  );
}

export default App;

By integrating Highcharts with React, I’ve easily and quickly created an interactive small multiples map application that visualizes Ireland’s historical population data.
Now, you know how to combine React with Highcharts to create small multiple maps.

Related posts