![\"A](\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/12\/marimekko-chart-js-tutorial.png\")
Would you like to know how to\u00a0easily create an interactive Marimekko chart\u00a0for HTML5 based apps and Web pages using JavaScript? If yes, you are on the best path to learning this.<\/p>\nWould you like to know how to\u00a0easily create an interactive Marimekko chart\u00a0for HTML5 based apps and Web pages using JavaScript? If yes, you are on the best path to learning this.<\/p>\n
Also known as Mekko charts<\/a>\u00a0and market maps, Marimekko charts display numerical values that vary from 0% to 100% in its Y-axis. The most exciting part lies in their X-axis, which indicates the sum of values within categories. Each category’s width along the X-axis portraits the whole category’s contribution to a total of all data. In simple words, this is a type of a stacked chart that visualizes categorical data. Still, both the Y and X axes vary in a percentage scale by determining each segment’s width and height.<\/p>\n Are you a smartphone enthusiast and interested\u00a0to\u00a0look at\u00a0the\u00a0global smartphone shipments in 2019 by quarter and by vendor?\u00a0Then especially follow the present tutorial as\u00a0we are to visualize this market data in an elegant Marimekko\u00a0diagram\u00a0using\u00a0simple JS chart coding techniques.<\/p>\n <\/p>\n The general order of visualizing data in JavaScript charts\u00a0consists of the following simple four steps, and building a JS Marimekko chart is not an exception:<\/p>\n Now, let’s dig into each of these steps to\u00a0draw our nifty Marimekko chart.<\/p>\n The first step is to set up a basic HTML page to place the Marimekko chart.<\/p>\n The HTML page\u00a0developed above consists of two main sections, the header (between The Next, we should connect all the JavaScript scripts that are required to build\u00a0a Marimekko chart.<\/p>\n Generally, these simple steps to build a Marimekko or basically any other chart are quite the same for all JavaScript charting libraries. In this tutorial, I will take AnyChart<\/a> as an example. It is a popular flexible JS library for interactive data visualization, which has great documentation<\/a> and API reference<\/a>, and a lot of demos<\/a>, so it looks easy to get started with even for beginners.<\/p>\n AnyChart has a modular system, which means you do not need the entire library and can connect only those chart types and features that you need in reality. In this way, the size of the JavaScript code running on your web page is significantly reduced. It is always good for performance. So, the ‘base’ and ‘mekko’ modules should be used in our case to\u00a0represent data in\u00a0a Marimekko chart. They will be referenced in the The JavaScript code required to build the Marimekko chart should be written between the Following is the look of the code with new changes. Isn’t it cool? Keep on reading, guys. We are getting close to the most exciting part.<\/p>\n As stated at the beginning of this tutorial, Marimekko belongs to the 2D stacked chart family, but it illustrates an additional dimension of data through varying column widths. This chart type is widely being used to interpret sales data and perform marketing analysis, but make sure you’ve picked\u00a0data appropriately based on your requirement.<\/p>\n Are you curious about the number of global shipments of your favorite smartphone brand in 2019? Wait, let’s go more in-depth and\u00a0visualize the shipments quarterly so that the data will be suitable to fit into a Marimekko chart.<\/p>\n In the present case,\u00a0a Marimekko chart will be used to illustrate the top six brands of smartphone shipments (in millions) in 2019, quarterly. Following is the dataset that we\u2019ll be using. (Source: IDC<\/a>.)<\/p>\n We transformed the\u00a0mobile shipment data into a particular JavaScript object as shown below. It holds the data header settings, the title, and the data itself as an array of arrays.<\/p>\n The X-axis contains each smartphone brand\u2019s total shipments, while the Y-axis is used to read each smartphone brand\u2019s percentage of shipments\u00a0by quarter.<\/p>\n Following is the dataset that we’ll be using. The Once all the preparations are done, we can step into the final section to display the most awaited Marimekko chart. The entire JavaScript chart code responsible for displaying the Marimekko chart must be inserted inside the Then, use the code from step 3 to generate the data that needs to be fed to the Mekko chart.<\/p>\n The next step is to specify the JS chart type. In this case, we should use the Let\u2019s enable the legend of the chart like below.<\/p>\n Finally, command to draw the Marimekko chart in the container:<\/p>\n Here comes what we’ve waited for. (See this basic Marimekko chart on AnyChart Playground<\/a>.)<\/p>\nHow to Create Basic JS Marimekko Chart<\/h2>\n
\n
\n
Step 1: Create an HTML page<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>My Marimekko Chart Example<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Marimekko chart code goes here<\/span><\/em>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n<head><\/code><\/head><\/code> tags) and the body of the page (between <body><\/code><\/body><\/code> tags). In the header section, we have set the HTML page title (between <title><\/code><\/title><\/code> tags) and CSS rules (between <style><\/code><\/style><\/code> tags) to manage the container<\/code> element’s appearance.<\/p>\ndiv<\/code> element in the body section whose id is container<\/code>, is the block that will be used to place our Marimekko chart. Since I want the graphic to appear on the entire HTML page, I have set the container element’s width and height fields to 100%. So the chart will\u00a0be displayed\u00a0across the whole page.<\/p>\nStep 2: Connect all required scripts<\/h3>\n
<head><\/code><\/head><\/code> section,\u00a0in the\u00a0<script><\/code><\/script><\/code> tags.<\/p>\n<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-base.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-mekko.min.js\"><\/script><\/code><\/pre>\n<body><\/code><\/body><\/code> tags of the HTML page.<\/p>\n<!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>My Marimekko Chart Example<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-base.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-mekko.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Marimekko chart code goes here\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\nStep 3: Load the data you want to visualize<\/h3>\n
\n\n
\n <\/th>\n Huawei<\/th>\n Vivo<\/th>\n Apple<\/th>\n Samsung<\/th>\n Xiaomi<\/th>\n Oppo<\/th>\n Other<\/th>\n<\/tr>\n \n Q1<\/td>\n 59.1<\/td>\n 23.9<\/td>\n 42<\/td>\n 72<\/td>\n 27.8<\/td>\n 25.7<\/td>\n 90.5<\/td>\n<\/tr>\n \n Q2<\/td>\n 56.6<\/td>\n 27<\/td>\n 36.5<\/td>\n 76.3<\/td>\n 32.3<\/td>\n 30.6<\/td>\n 97.7<\/td>\n<\/tr>\n \n Q3<\/td>\n 66.8<\/td>\n 31.3<\/td>\n 44.8<\/td>\n 78.2<\/td>\n 31.7<\/td>\n 32.3<\/td>\n 94.9<\/td>\n<\/tr>\n \n Q4<\/td>\n 56.2<\/td>\n 31.5<\/td>\n 72.3<\/td>\n 70.4<\/td>\n 32.9<\/td>\n 31.4<\/td>\n 106.4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\nThe wonder of Mekko graphics is that both axes represent data on a percentage scale, but you need to put actual data only and the chart calculates everything automatically.<\/p>\nheader<\/code> setting of the JavaScript object below is used to set the quarter details of each smartphone producer brand. Hence, we will see quarter-wise relationships.<\/p>\nvar data = {\r\n title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',\r\n header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],\r\n rows: [\r\n ['Huawei', 59.1,56.6,66.8,56.2],\r\n ['Vivo', 23.9,27,31.3,31.5],\r\n ['Apple', 42,36.5,44.8,72.3],\r\n ['Samsung', 72,76.3,78.2,70.4],\r\n ['Xiaomi', 27.8,32.3,31.7,32.9],\r\n ['Oppo', 25.7,30.6,32.3,31.4],\r\n ['Others', 90.5,97.7,94.9,106.4],\r\n ]\r\n};<\/code><\/pre>\nStep 4: Writing the JS Marimekko chart code<\/h3>\n
anychart.onDocumentReady()<\/code> function which is written within the <script><\/code> tag. As the function’s name suggests, it waits until the page is ready to display the data.<\/p>\n<script>\r\n anychart.onDocumentReady(function() {\r\n \/\/ The entire JavaScript code of the Marimekko chart will be here\r\n });\r\n<\/script><\/code><\/pre>\nvar data = {\r\n title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',\r\n header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],\r\n rows: [\r\n ['Huawei', 59.1,56.6,66.8,56.2],\r\n ['Vivo', 23.9,27,31.3,31.5],\r\n ['Apple', 42,36.5,44.8,72.3],\r\n ['Samsung', 72,76.3,78.2,70.4],\r\n ['Xiaomi', 27.8,32.3,31.7,32.9],\r\n ['Oppo', 25.7,30.6,32.3,31.4],\r\n ['Others', 90.5,97.7,94.9,106.4],\r\n ]\r\n};<\/code><\/pre>\nmekko<\/code> chart and feed it with the data to be visualized in a Marimekko chart.<\/p>\n\/\/ create a mekko (marimekko) chart\r\nvar chart = anychart.mekko();\r\n\/\/ set the chart data\r\nchart.data(data);<\/code><\/pre>\n\/\/ enable the chart legend\r\nchart.legend(true);<\/code><\/pre>\n\/\/ set the chart container id\r\nchart.container('container');\r\n\/\/ draw the resulting marimekko chart\r\nchart.draw();<\/code><\/pre>\n