{"id":17031,"date":"2023-11-27T17:08:12","date_gmt":"2023-11-27T17:08:12","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17031"},"modified":"2023-11-28T08:39:50","modified_gmt":"2023-11-28T08:39:50","slug":"mekko-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/11\/27\/mekko-chart-js\/","title":{"rendered":"How to Make Mekko Chart Using JavaScript"},"content":{"rendered":"

\"\"Data visualization<\/a> plays a pivotal role in comprehending complex information and conveying insights clearly. Among the diverse array of techniques, the Mekko chart<\/strong> stands out for its ability to vividly represent categorical data and illuminate relationships between categories and subcategories.<\/p>\n

In this tutorial, we will delve into the world of Mekko charts. First, let\u2019s take a moment to explore what they are and how they function. Then, we\u2019ll get to the focal point, a step-by-step guide on how to quickly create a Mekko chart using JavaScript<\/strong>.<\/p>\n

The data used for illustration is the U.S. car sales data<\/strong> for the top eight car brands in 2022. By the end of this tutorial, you will have crafted a cool interactive JS Mekko chart that graphically represents the respective proportions within this data by brand and by quarter.<\/p>\n

So, ignite your data visualization engines, and let\u2019s go!<\/p>\n

<\/p>\n

What Is a Mekko Chart?<\/h2>\n

The Mekko Chart is a two-dimensional visualization of categorical data<\/a> presented in a rectangular grid, often referred to as the mosaic plot. Essentially, it functions as a variable-width 100% stacked column chart<\/a> with no spacing between columns and is designed to assist data analysts in uncovering relationships between categories and subcategories.<\/p>\n

Mekko charts effectively represent categorical data across two variables along the horizontal and vertical axes, respectively. Each category is depicted as a column, signifying 100%, and its width illustrates the category\u2019s size relative to the total of all categories, which is also represented as 100%. These columns are further divided into components, with the height of each sub-column indicating the proportion of subcategories within the overarching category.<\/p>\n

Mekko charts are also known as Marimekko charts. The "full" name "Marimekko charts" pays homage to the Finnish textile company Marimekko, renowned for its vibrant prints, some of which these charts resemble. Staying true to their inspirational source, Marimekko charts offer an engaging approach to intuitively presenting complex data. They excel in scenarios where you need to showcase how categories and subcategories contribute to their respective wholes and compare these contributions. These charts find wide-ranging applications across various fields, including market segmentation, product portfolio analysis, and project resource allocation.<\/p>\n

Mekko Chart Example: Preview<\/h2>\n

Eager to catch a glimpse of the data graphic we\u2019re about to create? Here\u2019s a sneak peek of what the final JavaScript-based Mekko chart will look like after implementing all the steps described in this tutorial.<\/p>\n

\"Basic<\/a><\/p>\n

Get ready to kickstart this data visualization journey with JavaScript. Buckle up as we steer through this data-driven road trip!<\/p>\n

A. Building a Basic Mekko Chart with JavaScript<\/h2>\n

Creating a JS-based Mekko chart is just a few simple steps away. Those are:<\/p>\n

    \n
  1. Set up an HTML page with a container<\/li>\n
  2. Include the required JavaScript files<\/li>\n
  3. Load the data<\/li>\n
  4. Write some JS charting code<\/li>\n<\/ol>\n

    No need to worry if you\u2019re a beginner in HTML, CSS, and JavaScript \u2013 I\u2019ll guide you through every step in detail.<\/p>\n

    1. Set up an HTML page with a container<\/h3>\n

    To create a Mekko chart, you\u2019ll need to set up an HTML container, your canvas for this masterpiece. Here\u2019s how:<\/p>\n

    Begin by creating a basic HTML page, or if you have one ready, use that as your starting point.<\/p>\n

    Next, introduce a <div><\/code> element into the body of your HTML page. Give it a unique ID, which you\u2019ll refer to in the JavaScript charting code.<\/p>\n

    You can also adjust CSS rules within the <style><\/code> tags to influence the chart\u2019s appearance. For instance, if you want it to span the entire page, set both the width and height properties to 100%. However, keep in mind that these CSS properties are totally flexible, and you can modify them to match the design and aesthetic requirements of your project.<\/p>\n

    Here\u2019s an example of how a basic web page structure, including a Mekko chart container element, might look:<\/p>\n

    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n<head<\/span>><\/span>\r\n  <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n  <title<\/span>><\/span>JavaScript Mekko Chart<\/title<\/span>><\/span>\r\n  <style<\/span> type<\/span>=\"text\/css\"<\/span>><\/span>\r\n    html<\/span>,\r\n    body<\/span>,\r\n    #mekko-container<\/span> {\r\n      width<\/span>: 100%<\/span>;\r\n      height<\/span>: 100%<\/span>;\r\n      margin<\/span>: 0<\/span>;\r\n      padding<\/span>: 0<\/span>;\r\n    }\r\n  <\/span><\/style<\/span>><\/span>\r\n<\/head<\/span>><\/span>\r\n<body<\/span>><\/span>\r\n  <div<\/span> id<\/span>=\"mekko-container\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    2. Include the required JavaScript files<\/h3>\n
    With your HTML structure in place, it\u2019s time to incorporate the JavaScript files needed for creating the required graphic. To streamline the process, you can opt for a JavaScript charting library<\/a> that comes with built-in Mekko chart support. This tutorial uses AnyChart<\/a>.<\/p>\n
    Generally, you have two ways to include JavaScript files. You can download them for local usage or link them directly via a CDN. This tutorial showcases the CDN approach.<\/p>\n
    Here\u2019s how your HTML code might look with a library\u2019s modules:<\/p>\n
    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n<head<\/span>><\/span>\r\n  <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n  <title<\/span>><\/span>JavaScript Mekko Chart<\/title<\/span>><\/span>\r\n  <style<\/span> type<\/span>=\"text\/css\"<\/span>><\/span>\r\n    html<\/span>,\r\n    body<\/span>,\r\n    #mekko-container<\/span> {\r\n      width<\/span>: 100%<\/span>;\r\n      height<\/span>: 100%<\/span>;\r\n      margin<\/span>: 0<\/span>;\r\n      padding<\/span>: 0<\/span>;\r\n    }\r\n  <\/span><\/style<\/span>><\/span>\r\n  <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n  <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-mekko.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n<\/head<\/span>><\/span>\r\n<body<\/span>><\/span>\r\n  <div<\/span> id<\/span>=\"mekko-container\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    3. Load the data<\/h3>\n
    Now, it\u2019s time to provide your Mekko chart with data. The data I\u2019m guiding you through visualizing in this tutorial pertains to auto sales of the top 8 car brands in the United States for the year 2022, broken down by quarter for each brand. It has been sourced from GoodCarBadCar.net<\/a>. Given the dataset\u2019s conciseness, you can add it directly into the JS code.<\/p>\n
    In the example provided below, the data is structured as a JavaScript object referred to as "data." This object encompasses the title of the dataset, a header array that delineates the four quarters of 2022, and a rows array. Within the rows array, each item is itself an array that corresponds to a leading auto brand and its quarterly sales figures.<\/p>\n
    var data = {\r\n  title: \"2022 U.S. Quarterly Auto Sales by Top 8 Brands\"<\/span>,\r\n  header: [\"Name\"<\/span>, \"Q1\"<\/span>, \"Q2\"<\/span>, \"Q3\"<\/span>, \"Q4\"<\/span>],\r\n  rows: [\r\n    [\"Ford\"<\/span>, 410.0<\/span>, 453.5<\/span>, 441.4<\/span>, 459.1<\/span>],\r\n    [\"Toyota\"<\/span>, 433.4<\/span>, 416.8<\/span>, 411.9<\/span>, 456.5<\/span>],\r\n    [\"Chevrolet\"<\/span>, 342.6<\/span>, 383.8<\/span>, 371.4<\/span>, 415.0<\/span>],\r\n    [\"Honda\"<\/span> 238.1<\/span>, 215.1<\/span>, 200.2<\/span>, 227.5<\/span>],\r\n    [\"Hyundai\"<\/span>, 152.3<\/span>, 184.1<\/span>, 184.4<\/span>, 195.9<\/span>],\r\n    [\"Jeep\"<\/span>, 193.2<\/span>, 186.6<\/span>, 161.3<\/span>, 143.3<\/span>],\r\n    [\"Nissan\"<\/span>, 189.8<\/span>, 172.6<\/span>, 142.8<\/span>, 177.4<\/span>],\r\n    [\"Kia\"<\/span>, 149.0<\/span>, 172.8<\/span>, 181.1<\/span>, 175.4<\/span>]\r\n  ]\r\n};\r\n<\/code><\/pre>\n
    4. Write some JS charting code<\/h3>\n
    Now that the data is ready, start coding your Mekko chart with JavaScript.<\/p>\n
    Begin by adding the anychart.onDocumentReady()<\/code> function, which ensures that your chart is rendered only when the web page is fully loaded.<\/p>\n
    <script<\/span>><\/span>\r\n  anychart.onDocumentReady(function<\/span> ()<\/span> <\/span>{\r\n    \/\/ The Mekko chart data and code will be in this section<\/span>\r\n  });\r\n<\/span><\/script<\/span>><\/span>\r\n<\/code><\/pre>\n
    Then, introduce the data prepared in Step 3 to create a Mekko chart.<\/p>\n
    anychart.onDocumentReady(function () {\r\n  \/\/ create a dataset\r\n  var data = {\r\n      title: \"2022 U.S. Quarterly Auto Sales by Top 8 Brands\"<\/span>,\r\n      header: [\"Name\"<\/span>, \"Q1\"<\/span>, \"Q2\"<\/span>, \"Q3\"<\/span>, \"Q4\"<\/span>],\r\n      rows: [\r\n        [\"Ford\"<\/span>, 410.0<\/span>, 453.5<\/span>, 441.4<\/span>, 459.1<\/span>],\r\n        [\"Toyota\"<\/span>, 433.4<\/span>, 416.8<\/span>, 411.9<\/span>, 456.5<\/span>],\r\n        [\"Chevrolet\"<\/span>, 342.6<\/span>, 383.8<\/span>, 371.4<\/span>, 415.0<\/span>],\r\n        [\"Honda\"<\/span>, 238.1<\/span>, 215.1<\/span>, 200.2<\/span>, 227.5<\/span>],\r\n        [\"Hyundai\"<\/span>, 152.3<\/span>, 184.1<\/span>, 184.4<\/span>, 195.9<\/span>],\r\n        [\"Jeep\"<\/span>, 193.2<\/span>, 186.6<\/span>, 161.3<\/span>, 143.3<\/span>],\r\n        [\"Nissan\"<\/span>, 189.8<\/span>, 172.6<\/span>, 142.8<\/span>, 177.4<\/span>],\r\n        [\"Kia\"<\/span>, 149.0<\/span>, 172.8<\/span>, 181.1<\/span>, 175.4<\/span>]\r\n      ]\r\n    };\r\n  });\r\n<\/code><\/pre>\n
    Next, within the same code enclosing function, create a Mekko chart instance and add the data to it.<\/p>\n
    \/\/ create a mekko (marimekko) chart<\/span>\r\nvar<\/span> chart = anychart.mekko();\r\n\r\n\/\/ add the data to the chart<\/span>\r\nchart.data<\/span>(data<\/span>);\r\n<\/code><\/pre>\n
    Finally, just put the chart in the div container created in Step 1 and draw the resulting Mekko chart.<\/p>\n
    \/\/ set the container<\/span>\r\nchart<\/span>.container<\/span>(\"mekko-container\"<\/span>);\r\n\r\n\/\/ draw the chart<\/span>\r\nchart<\/span>.draw<\/span>();\r\n<\/code><\/pre>\n
    And with that, you\u2019ve successfully created a Mekko chart using JavaScript. By observing the width of the columns, you can determine the sales share for each brand, while the height of the bars within each column reveals the quarterly brand sales distribution. Feel free to explore the interactive version of this chart here<\/a>, and stay tuned for the next section of this tutorial, which will delve into some ways to customize a ready JS Mekko chart.<\/p>\n