{"id":16793,"date":"2018-08-03T16:02:53","date_gmt":"2018-08-03T16:02:53","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=16793"},"modified":"2026-01-12T09:58:28","modified_gmt":"2026-01-12T09:58:28","slug":"why-and-how-to-split-one-chart-into-a-grid-of-charts-aka-small-multiple","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/best-practices\/why-and-how-to-split-one-chart-into-a-grid-of-charts-aka-small-multiple\/","title":{"rendered":"Why and how to split one chart into a grid of charts (aka. small multiple)"},"content":{"rendered":"<p>Sometimes when charts have a high density of data points such as line charts with multiple series, the visualization may end up being cluttered and may obscure. <\/p>\n<p>With some careful planning, data-density issues can be avoided using a multitude of approaches. One approach, which I will discuss here, is the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Small_multiple\">small multiple<\/a> or the grid chart. This solution separates data series into individual charts are arranged in a grid, with identical, axes and chart type.<\/p>\n<p>The small multiple can be very useful and easy to set up. Nevertheless, this method is not a very popular approach, probably because developers and designers may believe it is difficult to set up, or they are just not aware of this powerful method. <\/p>\n<p>In this tutorial, I will show you how to set up a small multiple, as well as discuss the advantages and disadvantages of this data visualization method. <\/p>\n<p>First, let\u2019s examine a chart symptomatic of this problem. The demo below displays the Euro foreign exchange reference rates of 10 different currencies from January 2009 to July 2018 on the same chart.<\/p>\n<p><i><a href=\"https:\/\/cloud.highcharts.com\/show\/7SQS67sJ8\">Demo link<\/a><\/i><br \/>\n<iframe class=\"highcharts-iframe\" src=\"https:\/\/cloud.highcharts.com\/embed\/7SQS67sJ8\/\" style=\"border: 0; width: 100%; height: 450px\"><\/iframe><\/p>\n<p>Even though I have added the zooming capability, and a shared tooltip to display the data in a single view, it is a challenge to process the chart\u2019s information. By representing all the data sets on one chart, many issues emerge such as:<\/p>\n<ol>\n<li>The main chart\u2019s message is entirely hijacked by the disproportional values of one or multiple charts, in this case, the Indonesian rupiah, as its values are way more significant than the rest of the data series; making it difficult to compare the different line charts. <\/li>\n<li>The readers have to zoom in\/out and deselect some data series to be able to check the rest of the data. (Click on the Indonesian rupiah to deselect the series, and you\u2019ll see how this may work, yet not the ideal way to interact with a chart)<\/li>\n<\/ol>\n<p>As you can see, displaying multiple data series, or series, on one chart could end up confusing the readers, especially if either some values are very close across series, or is considerably different from each other.<\/p>\n<p>The small multiple solves the issues I mentioned above by isolating and displaying each series from the data set on one chart. Readers may this way get to look at the \u201cshape\u201d of each series\u2019 trend and therefore get a better idea of the dynamics of each series. Readers may also find it easier to compare series in a grid-shape. Once the first chart is understood, the readers will not have to spend any effort to decipher the other charts\u2019 legends and axes, but rather keep their attention to process the data to either make a decision or to find patterns.<\/p>\n<p>In the <a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/master\/samples\/highcharts\/blog\/grid-chart-small-multiple\">demo below<\/a>, I visualize the same data of the Euro foreign exchange reference rates using the small multiple method.<\/p>\n<p><i><a href=\"hhttps:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/master\/samples\/highcharts\/blog\/grid-chart-small-multiple\">Demo link<\/a><\/i><\/p>\n<p><iframe title=\"Highcharts Stock grid chart\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/grid-chart-small-multiple\" style=\"border: 0; width: 100%; height: 850px\"><\/iframe><\/p>\n<p>From the charts above, I can easily see that the Swiss Franc gets stronger than the Euro over the past years; one Euro was worth 1.5 Swiss Franc in 2009 and in July 2018 it is only worth 1.2 Swiss Franc. Whereas, the Pound Sterling is almost worth the same value in 2009 and 2018, with a significant plunge at the beginning of 2015. <\/p>\n<p><b>Remark<\/b><\/p>\n<p>The small multiple, in general, has the same scale for all the data series, but in this case, for clarity purposes, I used different scales on the y-axis due to the significant differences in the data values. In such instances, it is strongly recommended to make it clear to the readers that the scales are different, in order to avoid making the wrong conclusions when comparing series.<\/p>\n<p>To create this small multiple, I had to isolate each data series on one chart using <a href=\"https:\/\/cloud.highcharts.com\/\">Highcharts cloud<\/a>, then gather their iframe in one div, that is it, easy right \ud83d\ude42 :<\/p>\n<pre>  &lt;div class=\"reduce\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-gT_Eme5tu\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/gT_Eme5tu\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-PganD5_th\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/PganD5_th\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-QzQT1743W\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/QzQT1743W\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-RbERuxfAt\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/RbERuxfAt\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-DS8I5A42B\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/DS8I5A42B\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-zNOknhPhQ\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/zNOknhPhQ\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-9F2XWYAqK\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/9F2XWYAqK\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-fiBWvn6jC\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/fiBWvn6jC\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div class=\"gridMap\" id=\"highcharts-CMpwG933f\"&gt;\r\n          &lt;script src=\"https:\/\/cloud.highcharts.com\/inject\/CMpwG933f\/\" defer=\"defer\"&gt;&lt;\/script&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n<\/pre>\n<h2>To map or not to map<\/h2>\n<p>Another practical use of the small multiple method is with maps. The irregularity of the maps\u2019 shapes and sizes could mislead the readers to make the wrong assumptions. Often bigger areas can overshadow smaller ones. For instance, the Canadian province of the Prince Edward Island is 300 times smaller than the Nunavut territory, so any standard Canadian map representation will completely hide the small province at the expense of the largest one. In this case, the small multiple can easily solve the issue without tempering with the shape of the maps like <a href=\"https:\/\/hc-dev.highcharts.com\/blog\/products\/highcharts\/visualize-country-size\/\">the tilemap chart<\/a>. <\/p>\n<p>The <a href=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-grid-chart-small-multiple\">demo below<\/a> visualizes the Canadian provinces and territories with their exact shape and almost the same sizes. It shows the winning political party during the 2015 federal election for each province or territory. This demo helps to focus on one point only: Which is the winning party. <\/p>\n<p><i><a href=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-grid-chart-small-multiple\">Demo link<\/a><\/i><br \/>\n<iframe title=\"Highcharts map grid chart\" style=\"width: 100%; height: 820px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-grid-chart-small-multiple\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>You can easily see that the Liberal party won in all provinces and territories except in Saskatchewan and Alberta where the conservative party has the majority of seats.<\/p>\n<p>Again, this demo is also easy to set up. I create each province and territory on a separate chart; then I gather them using the unordered list tag <code>&lt;ul&gt;<\/code>.<\/p>\n<pre> &lt;ul&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"yt\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"nt\"&gt; &lt;\/span&gt; &lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"nu\"&gt; &lt;\/span&gt; &lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"ns\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"nl\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"nb\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"qc\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"pe\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"on\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"mb\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"sk\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"ab\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;span class=\"gridMap\" id=\"bc\"&gt; &lt;\/span&gt;&lt;\/li&gt;\r\n  &lt;\/ul&gt;<\/pre>\n<p>To be able separate the province or the territory from the main Canadian map, I set up the option <code>allAreas<\/code> to false in each chart under the <code>series<\/code> feature: <\/p>\n<pre>  series: [{\r\n    data: [\r\n      ['ca-nb', 10],\r\n    ],\r\n    name: null,\r\n    color: liberal,\r\n    allAreas: false,\r\n    dataLabels: {\r\n      enabled: false\r\n    }\r\n  }]\r\n<\/pre>\n<p>Now, the map, in this case, is deliberately sparse with data. However, I can use other chart types with this dataset to tell a different version of the same story. In <a href=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/pie-grid-chart-small-multiple\">the demo below<\/a> I am using pie charts to allow readers to see the vote distribution within each province and territory at first glance. Depending on your data visualization goal, this may what you actually intended to highlight.<\/p>\n<p><i><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/master\/samples\/highcharts\/blog\/pie-grid-chart-small-multiple\">Demo link<\/a><\/i><br \/>\n<iframe title=\"Highcharts pie grid chart\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/pie-grid-chart-small-multiple\" style=\"border: 0; width: 100%; height: 640px\"><\/iframe><\/p>\n<h2>Disadvantages with grid charts<\/h2>\n<p>So far, I shared only the advantages of the small multiple (grid chart), but like any other method, there are disadvantages too.<\/p>\n<p>One of the main drawbacks is that visualizing many small charts on a big screen is fine. However, on smartphones and some tablets, it is not practical at all, as the reader has to scroll back and forward to check\/compare each chart. Another disadvantage is the number of the small charts, the bigger the number is the more time the readers need to process the charts, readers often ended up by using their memory to remember charts than actually processing the charts\u2019 information.<\/p>\n<p>Another problem is that when the data series contain values that are very far apart, you have to choose between having a fixed y-axis scale (which may render some series like a flat line like in our initial exchange rate chart) or you have to adjust the y-axis scale to maximize the vertical real-estate, which means that you might be misrepresenting the magnitude of each series (at the expense of comparing the \u201cshape\u201d of the trend appropriately) as exemplified in our small multiple currency chart.<\/p>\n<p>In the case of maps,  the small multiple may be advantageous in some cases, but it removes geographical context like size, placement, borders, etc. For readers not familiar with the country or the regions, this may be confusing.\n<\/p>\n<p>So there you go; Another data visualization tool for your toolbox. Bear in mind to use common sense when it comes to data visualization. Don\u2019t avoid a little extra work if it helps your reader, and also, don\u2019t create crazy small multiple visualizations just because you can!<\/p>\n<p>I am pretty sure that they are many other cases where small multiple can be very useful, feel free to share your experience and tips about it in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn why and how to use the small multiple technic, and what are its advantages and disadvantages.<\/p>\n","protected":false},"author":32,"featured_media":16819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1104],"tags":[1063,1094],"coauthors":[699],"class_list":["post-16793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best-practices","tag-data-visualization","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16793","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=16793"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16793\/revisions"}],"predecessor-version":[{"id":29144,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16793\/revisions\/29144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/16819"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16793"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}