{"id":24718,"date":"2024-03-15T10:45:37","date_gmt":"2024-03-15T10:45:37","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24718"},"modified":"2026-01-13T11:45:37","modified_gmt":"2026-01-13T11:45:37","slug":"small-multiples-map-with-highcharts-and-react","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/small-multiples-map-with-highcharts-and-react\/","title":{"rendered":"Small multiples map with Highcharts and React"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-c5bbea69 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<p>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 (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Historical_population_of_Ireland\" target=\"_blank\" rel=\"noopener\">wikipedia data source<\/a>).<br>The final demo is shown below:<br><a href=\"https:\/\/mekhatria.github.io\/small-multiple-map-react\/\" target=\"_blank\" rel=\"noopener\"><br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24733\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/03\/14124846\/Screenshot-2024-03-14-at-13.48.02.jpg\" alt=\"Using React and Highcharts Maps to show Irish small multiple map \" width=\"1160\" height=\"1048\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/03\/14124846\/Screenshot-2024-03-14-at-13.48.02.jpg 1160w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/03\/14124846\/Screenshot-2024-03-14-at-13.48.02-487x440.jpg 487w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/03\/14124846\/Screenshot-2024-03-14-at-13.48.02-653x590.jpg 653w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/03\/14124846\/Screenshot-2024-03-14-at-13.48.02-768x694.jpg 768w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><br><\/a><br>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.<\/p>\n\n\n\n<p>Let&#8217;s dive into the code to see how to create such a chart in 5 simple steps.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">1. Setting Up the Project<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npx create-react-app my-map-app\ncd my-map-app\nnpm install highcharts highcharts-react-official<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">2. Creating the Components<\/h2>\n\n\n\n<p>The application&#8217;s core lies in two primary components: Chart and Title.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Title Component<\/b>: Displays the heading and source of the data set.<\/li>\n\n\n\n<li><b>Chart Component<\/b>: Handles the rendering of the maps.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">3. Title Component<\/h2>\n\n\n\n<p>The Title component is straightforward. It consists of an HTML structure that displays the main heading and a citation for the data source.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import \".\/Title.css\";\n\nfunction Title() {\n  return (\n    &lt;div className=\"title\"&gt;\n       &lt;h1&gt;Historical population of Ireland &lt;\/h1&gt;\n       &lt;h2&gt;\n        Source:  &lt;a href=\"https:\/\/en.wikipedia.org\/wiki\/Historical_population_of_Ireland\" target=\"blank\" rel=\"noopener\"&gt;Wikipedia &lt;\/a&gt;\n       &lt;\/h2&gt;\n     &lt;\/div&gt;\n  );\n}\nexport default Title;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">4. Chart Component<\/h2>\n\n\n\n<p>The Chart component is where the magic happens. I leverage Highcharts React official wrapper and Highcharts&#8217; mapping capabilities to create my small multiple Irish maps. The component iterates over an array of maps (<code>arrMaps<\/code>), each representing a different year and its corresponding population data.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>\/\/ Chart.jsx\nimport HighchartsReact from \"highcharts-react-official\";\nimport Highcharts from \"highcharts\/highmaps\";\nimport irelandMap from \"@highcharts\/map-collection\/countries\/ie\/ie-all.topo.json\";\nimport \".\/Chart.css\";\n\n\/\/ Base options for the Highcharts map\nconst baseOptions = { \/* Highcharts configuration *\/ };\n\n\/\/ Array containing map data for different years\nconst arrMaps = &#91; \/* Array of map configurations *\/ ];\n\nfunction Chart() {\n  return (\n    &lt;div className=\"charts-container center\"&gt;\n      {arrMaps.map((map, i) =&gt; (\n        &lt;div className=\"chart\" key={i}&gt;\n          &lt;HighchartsReact\n            highcharts={Highcharts}\n            options={{\n              ...baseOptions,\n              title: map.title,\n              series: &#91;{ ...baseOptions.series&#91;0], data: map.data }],\n            }}\n            constructorType={\"mapChart\"}\n          \/&gt;\n        &lt;\/div&gt;\n      ))}\n    &lt;\/div&gt;\n  );\n}\n\nexport default Chart;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">5. Bringing It All Together<\/h2>\n\n\n\n<p>In my <code>App.js<\/code>, I put together the Title and Chart components, arranging them within a main container. This structure serves as the backbone of my application&#8217;s layout.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>\/\/ App.js\nimport \".\/App.css\";\nimport Title from \".\/components\/Title\/Title\";\nimport Chart from \".\/components\/Chart\/Chart\";\n\nfunction App() {\n  return (\n    &lt;div className=\"app-container\"&gt;\n      &lt;Title \/&gt;\n      &lt;Chart \/&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>By integrating Highcharts with React, I&#8217;ve easily and quickly created an interactive small multiples map application that visualizes Ireland&#8217;s historical population data.<br>Now, you know how to combine React with Highcharts to create small multiple maps.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\"><strong>Related posts<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/charts-in-javascript-with-highcharts\/\">Charts in JavaScript with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/graphing-in-javascript-with-highcharts\/\">Graphing in JavaScript with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-data-visualization-with-highcharts\/\">JavaScript data visualization with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/dynamic-charts-in-javascript-with-highcharts\/\">Dynamic charts in JavaScript with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/data-charting-with-highcharts\/\">Data charting with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/data-visualization-framework-by-highcharts\/\">Data visualization framework by Highcharts<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Step by step tutorial to create small multiple maps using Highcharts Maps and React.<\/p>\n","protected":false},"author":32,"featured_media":24768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[876,1031,824],"coauthors":[699],"class_list":["post-24718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-maps","tag-javascript","tag-react"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=24718"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24718\/revisions"}],"predecessor-version":[{"id":28648,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24718\/revisions\/28648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24768"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24718"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}