{"id":4975,"date":"2017-11-29T09:04:59","date_gmt":"2017-11-29T09:04:59","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=4975"},"modified":"2018-09-19T09:13:57","modified_gmt":"2018-09-19T09:13:57","slug":"multi-level-category-axis-challenge-anychart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/","title":{"rendered":"How to Add Multi-level Category Axis \u2014 Challenge AnyChart!"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5208\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg\" alt=\"Multi-level Category Axis \u2014 Challenge AnyChart!\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg 1400w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis-300x225.jpg 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis-768x576.jpg 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis-1024x768.jpg 1024w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/>We are glad to present to you a new\u00a0article in the <a href=\"https:\/\/www.anychart.com\/blog\/category\/challenge-anychart\/\">Challenge AnyChart!<\/a> series.<\/p>\n<p>Just to remind you, these are articles inspired by your requests to our <a href=\"https:\/\/www.anychart.com\/support\/\">Support Team<\/a> and our will to publicly prove that the opportunities of interactive data visualization with our <a href=\"https:\/\/www.anychart.com\">JavaScript (HTML5)\u00a0charting libraries<\/a> are profound.<\/p>\n<p>One of our customers asked us how to\u00a0<strong>add a multi-level category axis for\u00a0categorical data and display subcategories<\/strong>. Ok, there you go! We&#8217;ve made a quick tutorial and created the corresponding JavaScript chart example (you can already see it in the title picture).<\/p>\n<p><!--more--><\/p>\n<h2>Data Visualization Task<\/h2>\n<p>Here&#8217;s how the task of the challenge\u00a0was laid down by the customer:<\/p>\n<blockquote><p><em><strong>We&#8217;ve got data with nested subcategories. How to display both categories and subcategories in stacked columns with the help of AnyChart?<\/strong><\/em><\/p><\/blockquote>\n<p>In addition, the customer shared the following picture to illustrate what he would like to create by using the <a href=\"https:\/\/www.anychart.com\/products\/anychart\/overview\/\">JavaScript charting library of AnyChart<\/a>:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5189\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/multiaxis-chlng.png\" alt=\"Multi-level Category Axis | From customer\" width=\"90%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/multiaxis-chlng.png 740w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/multiaxis-chlng-300x165.png 300w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/p>\n<p>To build a solution according to this task, here&#8217;s what we need:<\/p>\n<ul>\n<li>work with data by means of view and iterator;<\/li>\n<li>use extra axes;<\/li>\n<li>use custom scales;<\/li>\n<li>use weights of scale ticks.<\/li>\n<\/ul>\n<h2>Solution Overview<\/h2>\n<p>First of all, let&#8217;s modify the source data and add empty values in it to visually separate data by category.<\/p>\n<p>Then, once the chart has been drawn and calculations for scales and bounds completed, we&#8217;ll add extra axes.<\/p>\n<h2>Find Groups in Data<\/h2>\n<p>Working with a <a href=\"https:\/\/api.anychart.com\/anychart.data#set\" target=\"_blank\" rel=\"nofollow\">data set<\/a> does not stop after feeding it as data to a chart.<\/p>\n<p>With the help of the <a href=\"https:\/\/api.anychart.com\/anychart.data.Set#mapAs\" target=\"_blank\" rel=\"nofollow\">mapAs<\/a> method, it is possible to get a different <a href=\"https:\/\/api.anychart.com\/anychart.data#view\" target=\"_blank\" rel=\"nofollow\">view<\/a>, i.e. a breakdown by a given parameter. We&#8217;ll\u00a0take on this opportunity.<\/p>\n<p>Then,\u00a0let&#8217;s use\u00a0the\u00a0<a href=\"https:\/\/api.anychart.com\/anychart.data.Iterator\" target=\"_blank\" rel=\"nofollow\">iterator<\/a> object to explore the view, in order to find categories and subcategories.<\/p>\n<h2>Use Extra Axes Not As Axes<\/h2>\n<p>In\u00a0the JavaScript chart we are going to build, we will use three X-axes overall, primary one and two <a href=\"https:\/\/docs.anychart.com\/Axes_and_Grids\/Additional_Axes\" target=\"_blank\" rel=\"nofollow\">extra axes<\/a>.<\/p>\n<p>One X-axis\u00a0will be the default X-axis that we&#8217;ll use exactly as an axis. We&#8217;ll only disable its own ticks.<\/p>\n<p>Another X-axis will serve solely to position main categories. We won&#8217;t display its ticks as well as the axis line.<\/p>\n<p>The third X-axis will be utilized to position ticks that are common for the former two axes.<\/p>\n<h2>Additional Scales for Supplementary Calculations<\/h2>\n<p>Axes work with scales and essentially visualize them. So in order to implement the idea, we&#8217;ll need a custom scale containing data about categories and subcategories.<\/p>\n<p>We&#8217;ll analyze the data and create a set of ticks and category names. Then we&#8217;ll build the axes on that scale.<\/p>\n<h2>Use Weights for Ticks as Visualization Tool<\/h2>\n<p>To get a beautiful picture in which different groups of data are separated from one another,\u00a0let&#8217;s modify the data and insert points with empty values in it.<\/p>\n<p>After that, in order to shift the visual focus from the empty points to the real data, we&#8217;ll use the <a href=\"https:\/\/api.anychart.com\/anychart.scales.Ordinal#weights\" target=\"_blank\" rel=\"nofollow\">weight<\/a> feature.<\/p>\n<p>Kind of padding we&#8217;ll get in result should make the perception of the data on such a visualization more efficient.<\/p>\n<h2>Result: Interactive JavaScript Chart with Multi-level Category Axis<\/h2>\n<p>Look at the result!<\/p>\n<p class='codepen'  data-height='565' data-theme-id='0' data-slug-hash='Zaaeag' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Sub-Categories on X-Axis by Vitaly (@Radionov) on CodePen.<\/p>\n\n<p>Check out the code of the chart with the multi-level category axis:<\/p>\n<pre><code class=\"javascript\">anychart.onDocumentReady(function () {\r\n    var data = preprocessData([\r\n        ['Accelerate', 'Onsite', 18, NaN, NaN],\r\n        ['CIS Renew', 'Offshore', 6, NaN, 2],\r\n        ['CIS Renew', 'Onsite', 7, 1, 4],\r\n        ['CIS Others', 'Offshore', NaN, NaN, 1],\r\n        ['CIS Others', 'Onsite', 2, 1, 1]\r\n    ]);\r\n\r\n    var chart = anychart.column();\r\n\r\n    \/\/ configure global settings for series labels\r\n    chart.labels({position:'center', fontColor:'#000'});\r\n\r\n    \/\/ add subcategory names to the meta of one of the series\r\n    chart.column(data.mapAs({'value': 2, 'sub-category': 1}));\r\n    chart.column(data.mapAs({'value': 3}));\r\n    chart.column(data.mapAs({'value': 4}));\r\n\r\n    \/\/ turn on stacking\r\n    chart.yScale().stackMode('value');\r\n\r\n    \/\/ use subcategory names as names of X-axis ticks\r\n    chart.xScale().names('sub-category');\r\n\r\n    \/\/ set a container and draw the chart\r\n    chart.container('container');\r\n    chart.draw();\r\n\r\n    \/\/ calculate extra axes\r\n    createTwoLevelAxis(chart, data, 0.1);\r\n\r\n});\r\n\r\nfunction preprocessData(data){\r\n    \/\/ to make beautiful spacing between categories, add\r\n    \/\/ several empty lines with the same category names to the data\r\n    if (data.length &gt; 0) {\r\n        \/\/ add one to the beginning of the array\r\n        data.unshift([data[0][0]]);\r\n        \/\/ add one more to the end of the data\r\n        data.push([data[data.length - 1][0]]);\r\n        \/\/ add two empty items every time the category name changes,\r\n        \/\/ to each category\r\n        for (var i = 2; i &lt; data.length - 2; i++) {\r\n            var previous = data[i-1][0];\r\n            var current = data[i][0];\r\n            if (current!=previous)\r\n            {\r\n                data.splice(i, 0, [previous], [current]);\r\n                i = i+2;\r\n            }\r\n        }\r\n    }\r\n    return anychart.data.set(data);\r\n}\r\n\r\nfunction createTwoLevelAxis(chart, data, padding){\r\n    \/\/ subcategory names\r\n    var names = [];\r\n    \/\/ ticks for axes based on on main categories\r\n    var ticks = [];\r\n    \/\/ weights of ticks (to make spacing between categories by using\r\n    \/\/ the empty lines created in preprocessData)\r\n    var weights = [];\r\n    \/\/ the iterator feature allows us to go over data, so\r\n    \/\/ create an iterator for the new breakdown\r\n    var iter = data.mapAs({'category': 0, 'sub-category': 1}).getIterator();\r\n    while(iter.advance()) {\r\n        var name = iter.get('category');\r\n        var value = iter.get('sub-category');\r\n        \/\/ store category names\r\n        names.push(name);\r\n        \/\/ when the border between categories is identified, create a tick\r\n        if (name &amp;&amp; names[names.length - 1] != names[names.length - 2]) \t\t\t\t\t{\r\n            ticks.push(iter.getIndex());\r\n        }\r\n        \/\/ assign weight to the tick\r\n        weights.push(value?1:padding);\r\n    }\r\n\r\n    \/\/ create a custom scale\r\n    var customScale = anychart.scales.ordinal();\r\n    \/\/ supply values from the chart to the scale\r\n    customScale.values(chart.xScale().values());\r\n    \/\/ names of main categories only\r\n    customScale.names(names);\r\n    \/\/ weights for new ticks\r\n    customScale.weights(weights);\r\n    \/\/ synchronize weights with the chart scale\r\n    chart.xScale().weights(weights);\r\n    customScale.ticks(ticks);\r\n\r\n    \/\/ disable ticks along the main axis\r\n    chart.xAxis(0).ticks(false);\r\n\r\n    \/\/ create an extra chart axis and hide its ticks and the axis line, leaving only labels displayed\r\n    chart.xAxis(1)\r\n            .scale(customScale)\r\n            .stroke('none')\r\n            .ticks(false);\r\n    \/\/ draw one more extra axis without the axis line and labels, leaving only big ticks\r\n    var additionalXaxis = chart.xAxis(2);\r\n    additionalXaxis.scale(customScale);\r\n    additionalXaxis.labels(false);\r\n    additionalXaxis.stroke('none');\r\n    additionalXaxis.ticks()\r\n            .length(46)\r\n            .position('inside');\r\n}\r\n<\/code><\/pre>\n<hr \/>\n<p>We hope you like this article explaining how to build a JavaScript chart with the multi-level category axis (X-axis) and that you&#8217;ll find it useful.<\/p>\n<p>If you have an interesting but complicated data visualization task and you are unsure (yet) how to deal with it in <a href=\"https:\/\/www.anychart.com\">AnyChart JS Charts<\/a>, send us an email at <a href=\"mailto:support@anychart.com\" target=\"_blank\" rel=\"nofollow\">support@anychart.com<\/a> with the subject line &#8220;Challenge&#8221;. We are always happy to help you. And your question may well become the focus of our next <a href=\"https:\/\/www.anychart.com\/blog\/category\/challenge-anychart\/\">Challenge AnyChart!<\/a> article.<\/p>\n<p><strong>In fact, all is possible with AnyChart when it comes to interactive data visualization! We&#8217;ll show you how.<\/strong><\/p>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>We are glad to present to you a new\u00a0article in the Challenge AnyChart! series. Just to remind you, these are articles inspired by your requests to our Support Team and our will to publicly prove that the opportunities of interactive data visualization with our JavaScript (HTML5)\u00a0charting libraries are profound. One of our customers asked us [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,280,22,23,13,4],"tags":[53,281,44,290,85,54,32,55,36,141,81,57,58,65,56,30,172],"class_list":["post-4975","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-challenge-anychart","category-charts-and-art","category-html5","category-javascript","category-tips-and-tricks","tag-anychart","tag-challenge","tag-charts-and-art","tag-column-chart","tag-column-charts","tag-data-visualization","tag-html5","tag-html5-charts","tag-javascript","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-js-chart","tag-js-charting","tag-js-charts","tag-tips-and-tricks","tag-tutorial","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Multi-level Category Axis: How to Add It to JS Chart \u2014 Challenge AnyChart!<\/title>\n<meta name=\"description\" content=\"Meet the new &quot;Challenge AnyChart!&quot; article. New JS dataviz challenge: How to add a multi-level category axis for categorical data and display subcategories.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multi-level Category Axis: How to Add It to JS Chart \u2014 Challenge AnyChart!\" \/>\n<meta property=\"og:description\" content=\"Meet the new &quot;Challenge AnyChart!&quot; article. New JS dataviz challenge: How to add a multi-level category axis for categorical data and display subcategories.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-29T09:04:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-09-19T09:13:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"1050\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vitaly Radionov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vitaly Radionov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/\"},\"author\":{\"name\":\"Vitaly Radionov\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df\"},\"headline\":\"How to Add Multi-level Category Axis \u2014 Challenge AnyChart!\",\"datePublished\":\"2017-11-29T09:04:59+00:00\",\"dateModified\":\"2018-09-19T09:13:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/\"},\"wordCount\":685,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg\",\"keywords\":[\"AnyChart\",\"challenge\",\"Charts and Art\",\"column chart\",\"column charts\",\"Data Visualization\",\"HTML5\",\"html5 charts\",\"JavaScript\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"js chart\",\"js charting\",\"js charts\",\"Tips and tricks\",\"tutorial\"],\"articleSection\":[\"AnyChart Charting Component\",\"Challenge AnyChart!\",\"Charts and Art\",\"HTML5\",\"JavaScript\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/\",\"name\":\"Multi-level Category Axis: How to Add It to JS Chart \u2014 Challenge AnyChart!\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg\",\"datePublished\":\"2017-11-29T09:04:59+00:00\",\"dateModified\":\"2018-09-19T09:13:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df\"},\"description\":\"Meet the new \\\"Challenge AnyChart!\\\" article. New JS dataviz challenge: How to add a multi-level category axis for categorical data and display subcategories.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg\",\"width\":1400,\"height\":1050},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Multi-level Category Axis \u2014 Challenge AnyChart!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df\",\"name\":\"Vitaly Radionov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g\",\"caption\":\"Vitaly Radionov\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/vitaly-radionov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Multi-level Category Axis: How to Add It to JS Chart \u2014 Challenge AnyChart!","description":"Meet the new \"Challenge AnyChart!\" article. New JS dataviz challenge: How to add a multi-level category axis for categorical data and display subcategories.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/","og_locale":"en_US","og_type":"article","og_title":"Multi-level Category Axis: How to Add It to JS Chart \u2014 Challenge AnyChart!","og_description":"Meet the new \"Challenge AnyChart!\" article. New JS dataviz challenge: How to add a multi-level category axis for categorical data and display subcategories.","og_url":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2017-11-29T09:04:59+00:00","article_modified_time":"2018-09-19T09:13:57+00:00","og_image":[{"width":1400,"height":1050,"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg","type":"image\/jpeg"}],"author":"Vitaly Radionov","twitter_card":"summary_large_image","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Vitaly Radionov","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/"},"author":{"name":"Vitaly Radionov","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df"},"headline":"How to Add Multi-level Category Axis \u2014 Challenge AnyChart!","datePublished":"2017-11-29T09:04:59+00:00","dateModified":"2018-09-19T09:13:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/"},"wordCount":685,"commentCount":1,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg","keywords":["AnyChart","challenge","Charts and Art","column chart","column charts","Data Visualization","HTML5","html5 charts","JavaScript","javascript charting","JavaScript charting library","javascript charts","js chart","js charting","js charts","Tips and tricks","tutorial"],"articleSection":["AnyChart Charting Component","Challenge AnyChart!","Charts and Art","HTML5","JavaScript","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/","url":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/","name":"Multi-level Category Axis: How to Add It to JS Chart \u2014 Challenge AnyChart!","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg","datePublished":"2017-11-29T09:04:59+00:00","dateModified":"2018-09-19T09:13:57+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df"},"description":"Meet the new \"Challenge AnyChart!\" article. New JS dataviz challenge: How to add a multi-level category axis for categorical data and display subcategories.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2027\/10\/MultiLevelAxis.jpg","width":1400,"height":1050},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2017\/11\/29\/multi-level-category-axis-challenge-anychart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Multi-level Category Axis \u2014 Challenge AnyChart!"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df","name":"Vitaly Radionov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g","caption":"Vitaly Radionov"},"url":"https:\/\/www.anychart.com\/blog\/author\/vitaly-radionov\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=4975"}],"version-history":[{"count":23,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4975\/revisions"}],"predecessor-version":[{"id":6565,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/4975\/revisions\/6565"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=4975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=4975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=4975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}