{"id":16693,"date":"2023-06-19T10:18:54","date_gmt":"2023-06-19T10:18:54","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16693"},"modified":"2023-06-19T15:54:44","modified_gmt":"2023-06-19T15:54:44","slug":"sunburst-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/","title":{"rendered":"How to Make Sunburst Chart in JavaScript"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png\" alt=\"Sunburst Chart in JavaScript\" width=\"100%\" class=\"alignnone size-full wp-image-16703\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png 1366w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js-300x169.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js-768x432.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js-1024x576.png 1024w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><\/a>In the world of data all around us, charts play a crucial role in helping us explore and understand data more effectively. One powerful visualization technique is the sunburst chart, which allows us to represent hierarchical datasets, providing insights into complex compositions visually. In this tutorial, I&#8217;ll show you how to create your own stunning interactive sunburst charts using JavaScript effortlessly.<\/p>\n<p>We&#8217;ll embark on an exciting journey using data about Oscar-winning actors and actresses from countries around the world as an example. Our JS-based sunburst chart will shine a spotlight on the achievements of those born outside the United States, representing the rich diversity of their origins.<\/p>\n<p>Get ready to unlock the secrets of JavaScript sunburst chart development as I\u2019ll guide you step-by-step. Together, we&#8217;ll learn how to effortlessly bring data to life, creating this mesmerizing visualization that engages and informs. Let&#8217;s dive in and discover the fascinating world of the sunburst chart!<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>What Is Sunburst Chart?<\/h2>\n<p>The <a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/sunburst-chart\/\">sunburst chart<\/a>, also known as a radial treemap or multi-level pie chart, is a powerful visualization tool used to represent hierarchical datasets. It showcases data in a circular layout, with nested rings that depict different levels of the hierarchy. The innermost ring represents the top level, while the outer rings correspond to subcategories.<\/p>\n<p>Each ring is divided into slices, each showing a specific data point within its respective category. The size of the slices can sometimes indicate the values associated with the data points. Users can drill down to explore more detailed information and gain deeper insights by clicking on a particular level of the hierarchy.<\/p>\n<p>The sunburst chart offers an intuitive and visually appealing way to analyze hierarchical data, enabling users to easily grasp the relationships and proportions between different categories and subcategories. Its interactive nature facilitates exploration and discovery, making it a valuable tool for visual data analytics.<\/p>\n<h2>Sunburst Chart Preview<\/h2>\n<p>Behold the grand finale of this tutorial, the magnificent interactive JavaScript-based sunburst chart we&#8217;ll create together in a step-by-step fashion.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js-preview.gif\" alt=\"interactive JavaScript-based sunburst chart we'll create together\" width=\"100%\" class=\"alignnone size-full wp-image-16700\" \/><\/p>\n<p>Let&#8217;s waste no more time and dive right into the charting process!<\/p>\n<h2>Creating Basic JS Sunburst Chart<\/h2>\n<p>The concept of the interactive sunburst chart may initially seem daunting and time-consuming when it comes to this data visualization development, but fear not! Let\u2019s break it down into four simple steps. I\u2019ll guide you through each, and you&#8217;ll soon realize it&#8217;s a breeze.<\/p>\n<div>\n<ul>\n<li>Create a web page in HTML<\/li>\n<li>Include the required JavaScript files<\/li>\n<li>Add the data<\/li>\n<li>Write some JavaScript code<\/li>\n<\/ul>\n<\/div>\n<h3>1. Create a web page in HTML<\/h3>\n<p>Let&#8217;s kick off our sunburst chart adventure by creating a simple HTML page as its foundation. We&#8217;ll start by setting the page title to &#8220;JavaScript Sunburst Chart.\u201d<\/p>\n<p>To contain the chart, we&#8217;ll add an HTML block element as a <code>&lt;div&gt;<\/code>. Let&#8217;s give this div an id attribute of &#8220;container&#8221; so that we can easily reference it later in our journey.<\/p>\n<p>Then let&#8217;s add a touch of style to our chart. Inside the <code>&lt;style&gt;<\/code> block, we&#8217;ll include a few CSS rules that will display our sunburst chart beautifully across the entire screen. We&#8217;ll set the width and height properties to 100% to ensure it fills the entire available space. Additionally, we&#8217;ll set the margin and padding to 0, allowing our chart to stand out without any unnecessary boundaries. Remember, these initial rules are just a starting point, and you&#8217;re welcome to customize them as you see fit!<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;JavaScript Sunburst Chart&lt;\/title&gt;\r\n    &lt;style type=\"text\/css\"&gt;      \r\n      html, body, #container { \r\n        width: 100%; \r\n        height: 100%; \r\n        margin: 0; \r\n        padding: 0; \r\n      } \r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>With our basic HTML page set up and our chart container ready to embrace the visual magic, it&#8217;s time to move forward and unlock the secrets of creating a captivating sunburst chart with JavaScript. Let&#8217;s continue our journey and bring our data to life in the most stunning way possible!<\/p>\n<h3>2. Include the required JavaScript files<\/h3>\n<p>Now, it&#8217;s time to bring the power of JavaScript to our HTML page by including the necessary script files. In the <code>&lt;head&gt;<\/code> section of our HTML page, we&#8217;ll ensure that these files find their rightful place. We have a couple of options to achieve this. One option is to download the required script files and include them locally in our project. In this tutorial, let\u2019s take a different approach for efficiency and include the scripts directly from a CDN (&#8220;content delivery network&#8221;).<\/p>\n<p>There are not many JavaScript charting libraries out there that support sunburst charts out of the box. One of those is <a href=\"https:\/\/www.anychart.com\">AnyChart<\/a>, which has thorough <a href=\"https:\/\/docs.anychart.com\/\" target=\"_blank\" rel=\"nofollow\">documentation<\/a> for its vast data visualization capabilities and a <a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/\">gallery<\/a> full of ready-to-use chart examples, so I\u2019ve chosen it for the sunburst chart development showcase in this tutorial.<\/p>\n<p>AnyChart boasts a <a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Modules\" target=\"_blank\" rel=\"nofollow\">modular<\/a> structure that allows us to seamlessly connect only the specific chart types and features as needed, optimizing the size of the running JavaScript code and ensuring smooth performance. For our sunburst chart to dazzle, we need to add two essential modules: the Core module, which forms the backbone of the library, and the Sunburst module, which specifically empowers us to create captivating sunburst visualizations.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;JavaScript Sunburst Chart&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-sunburst.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style type=\"text\/css\"&gt;      \r\n      html, body, #container { \r\n        width: 100%; \r\n        height: 100%; \r\n        margin: 0; \r\n        padding: 0; \r\n      } \r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      \/\/ All the code for the JS sunburst chart will come here\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>With the JavaScript files in place, our HTML page is now armed with the necessary tools to embark on this charting journey. Let&#8217;s forge ahead and unlock the secrets of crafting a magnificent sunburst chart!<\/p>\n<h3>3. Add the data<\/h3>\n<p>Fantastic! Let&#8217;s dive deeper into the world of Oscar-winning actors and actresses and explore their diverse origins. Our focus will be on visualizing data specifically related to non-Americans who have received the prestigious prize in the four primary acting categories since the inception of the Academy Awards:<\/p>\n<ul>\n<li>Best Actor<\/li>\n<li>Best Actress<\/li>\n<li>Best Supporting Actor<\/li>\n<li>Best Supporting Actress<\/li>\n<\/ul>\n<p>I have obtained a dataset from <a href=\"https:\/\/www.wanderu.com\/blog\/states-and-countries-with-most-oscar-winning-actors\/\" target=\"_blank\" rel=\"nofollow\">Wanderu<\/a> and updated it using the latest data from the official <a href=\"https:\/\/awardsdatabase.oscars.org\/\" target=\"_blank\" rel=\"nofollow\">Academy Awards Database<\/a> and Wikipedia. To make it suitable for our JavaScript sunburst chart, I\u2019ve structured the data into an <a href=\"https:\/\/docs.anychart.com\/Working_with_Data\/Data_Sets#array_of_objects\" target=\"_blank\" rel=\"nofollow\">array of objects<\/a>, where each object contains essential details such as name, value, and children.<\/p>\n<p>To start we will begin with data from one country for the sake of simplicity and clarity.<\/p>\n<pre><code class=\"javascript\">var data = [\r\n  {\r\n    name: \"World\", value: 115, children: [\r\n      {\r\n        name: \"Europe\", value: 87, children: [\r\n          {\r\n            name: \"England\", value: 53, children: [\r\n              { name: \"Alec Guinness\", value: 1 },\r\n              { name: \"Ben Kingsley\", value: 1 },\r\n              { name: \"Charles Laughton\", value: 2 },\r\n              { name: \"Colin Firth\", value: 1 },\r\n              { name: \"Daniel Day-Lewis\", value: 3 },\r\n              { name: \"Daniel Kaluuya\", value: 1 },\r\n              { name: \"David Niven\", value: 1 },\r\n              { name: \"Donald Crisp\", value: 1 },\r\n              { name: \"Eddie Redmayne\", value: 1 },\r\n              { name: \"Edmund Gwenn\", value: 1 },\r\n              { name: \"Elizabeth Taylor\", value: 2 },\r\n              { name: \"Emma Thompson\", value: 1 },\r\n              { name: \"Gary Oldman\", value: 1 },\r\n              { name: \"George Arliss\", value: 2 },\r\n              { name: \"Glenda Jackson\", value: 2 },\r\n              { name: \"Greer Garson\", value: 1 },\r\n              { name: \"Helen Mirren\", value: 1 },\r\n              { name: \"Jeremy Irons\", value: 1 },\r\n              { name: \"Jessica Tandy\", value: 1 },\r\n              { name: \"Jim Broadbent\", value: 1 },\r\n              { name: \"John Gielgud\", value: 1 },\r\n              { name: \"John Mills\", value: 1 },\r\n              { name: \"Judi Dench\", value: 1 },\r\n              { name: \"Julie Andrews\", value: 1 },\r\n              { name: \"Kate Winslet\", value: 1 },\r\n              { name: \"Laurence Olivier\", value: 1 },\r\n              { name: \"Maggie Smith\", value: 3 },\r\n              { name: \"Margaret Rutherford\", value: 1 },\r\n              { name: \"Mark Rylance\", value: 1 },\r\n              { name: \"Michael Caine\", value: 2 },\r\n              { name: \"Olivia Colman\", value: 1 },\r\n              { name: \"Paul Scofield\", value: 1 },\r\n              { name: \"Peggy Ashcroft\", value: 1 },\r\n              { name: \"Peter Finch\", value: 1 },\r\n              { name: \"Peter Ustinov\", value: 2 },\r\n              { name: \"Rachel Weisz\", value: 1 },\r\n              { name: \"Rex Harrison\", value: 1 },\r\n              { name: \"Robert Donat\", value: 1 },\r\n              { name: \"Ronald Colman\", value: 1 },\r\n              { name: \"Tilda Swinton\", value: 1 },\r\n              { name: \"Vanessa Redgrave\", value: 1 },\r\n              { name: \"Victor McLaglen\", value: 1 },\r\n              { name: \"Wendy Hiller\", value: 1 }\r\n            ]\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n];<\/code><\/pre>\n<p>As we progress, we&#8217;ll gradually expand our visualization to include data from all countries. So, rest assured, we&#8217;ll soon have a comprehensive view of the incredible achievements of Oscar-winning actors and actresses from around the world.<\/p>\n<p>Now, let\u2019s harness the power of JavaScript to breathe life into our data visualization masterpiece!<\/p>\n<h3>4. Write some JS code<\/h3>\n<p>To kick off our journey into the world of JavaScript-based sunburst charts, we&#8217;ll make sure our code struts its stuff once the stage is set by using the snazzy <code>anychart.onDocumentReady()<\/code> function.<\/p>\n<pre><code class=\"html\">&lt;script&gt;\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The JS Sunburst Chart's code will be written here.\r\n  }\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>Now, let&#8217;s bring in the data and set the stage by decking it out as a tree.<\/p>\n<pre><code class=\"javascript\">var chart = anychart.sunburst(data, \"as-tree\");<\/code><\/pre>\n<p>We should also <a href=\"https:\/\/www.anychart.com\/blog\/2017\/04\/05\/chart-captions-title-graph-tips\/\">add a chart title<\/a> to make it instantly clear exactly what the upcoming diagram will show. To house our masterpiece, we&#8217;ll assign it a special container, the very one we designated in our opening act.<\/p>\n<pre><code class=\"javascript\">chart.title(\"Non-U.S. Born Oscar Winners for Acting\");\r\nchart.container(\"container\");<\/code><\/pre>\n<p>The complete stage is set, the lights are dimmed, and it&#8217;s time for our graphic to take center stage! Let\u2019s draw our sunburst chart, transforming data into a mesmerizing visual performance.<\/p>\n<pre><code class=\"javascript\">chart.draw();<\/code><\/pre>\n<p>Check out the output and prepare to be amazed as you explore the interactive drill-down feature of our JavaScript (HTML5) sunburst chart! Click here, click there, and witness the dynamic transformation right before your eyes. You can see it right below or visit the <a href=\"https:\/\/playground.anychart.com\/jOcwFuyv\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>, where the full code editor awaits your creative touch.<\/p>\n<p>But hold on, there&#8217;s more! In the next section, we&#8217;ll unleash our creative powers and dive into customization tips and tricks that will elevate your chart to the next level.<\/p>\n<p><iframe sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\n                 allow-popups allow-modals allow-forms\" frameBorder=\"0\" class=\"anychart-embed anychart-embed-jOcwFuyv\"\n        allowtransparency=\"true\" allowfullscreen=\"true\"\n        src=\"https:\/\/playground.anychart.com\/jOcwFuyv\/iframe\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-jOcwFuyv{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;JavaScript Sunburst Chart&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-sunburst.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style type=\"text\/css\"&gt;      \r\n      html, body, #container { \r\n        width: 100%; \r\n        height: 100%; \r\n        margin: 0; \r\n        padding: 0; \r\n      } \r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      anychart.onDocumentReady(function(){\r\n        \/\/ create the data\r\n        var data = [\r\n          {\r\n            name: \"World\", value: 115, children: [\r\n              {\r\n                name: \"Europe\", value: 87, children: [\r\n                  {\r\n                    name: \"England\", value: 53, children: [\r\n                      { name: \"Alec Guinness\", value: 1 },\r\n                      { name: \"Ben Kingsley\", value: 1 },\r\n                      { name: \"Charles Laughton\", value: 2 },\r\n                      { name: \"Colin Firth\", value: 1 },\r\n                      { name: \"Daniel Day-Lewis\", value: 3 },\r\n                      { name: \"Daniel Kaluuya\", value: 1 },\r\n                      { name: \"David Niven\", value: 1 },\r\n                      { name: \"Donald Crisp\", value: 1 },\r\n                      { name: \"Eddie Redmayne\", value: 1 },\r\n                      { name: \"Edmund Gwenn\", value: 1 },\r\n                      { name: \"Elizabeth Taylor\", value: 2 },\r\n                      { name: \"Emma Thompson\", value: 1 },\r\n                      { name: \"Gary Oldman\", value: 1 },\r\n                      { name: \"George Arliss\", value: 2 },\r\n                      { name: \"Glenda Jackson\", value: 2 },\r\n                      { name: \"Greer Garson\", value: 1 },\r\n                      { name: \"Helen Mirren\", value: 1 },\r\n                      { name: \"Jeremy Irons\", value: 1 },\r\n                      { name: \"Jessica Tandy\", value: 1 },\r\n                      { name: \"Jim Broadbent\", value: 1 },\r\n                      { name: \"John Gielgud\", value: 1 },\r\n                      { name: \"John Mills\", value: 1 },\r\n                      { name: \"Judi Dench\", value: 1 },\r\n                      { name: \"Julie Andrews\", value: 1 },\r\n                      { name: \"Kate Winslet\", value: 1 },\r\n                      { name: \"Laurence Olivier\", value: 1 },\r\n                      { name: \"Maggie Smith\", value: 3 },\r\n                      { name: \"Margaret Rutherford\", value: 1 },\r\n                      { name: \"Mark Rylance\", value: 1 },\r\n                      { name: \"Michael Caine\", value: 2 },\r\n                      { name: \"Olivia Colman\", value: 1 },\r\n                      { name: \"Paul Scofield\", value: 1 },\r\n                      { name: \"Peggy Ashcroft\", value: 1 },\r\n                      { name: \"Peter Finch\", value: 1 },\r\n                      { name: \"Peter Ustinov\", value: 2 },\r\n                      { name: \"Rachel Weisz\", value: 1 },\r\n                      { name: \"Rex Harrison\", value: 1 },\r\n                      { name: \"Robert Donat\", value: 1 },\r\n                      { name: \"Ronald Colman\", value: 1 },\r\n                      { name: \"Tilda Swinton\", value: 1 },\r\n                      { name: \"Vanessa Redgrave\", value: 1 },\r\n                      { name: \"Victor McLaglen\", value: 1 },\r\n                      { name: \"Wendy Hiller\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Austria\", value: 3, children: [\r\n                      { name: \"Christoph Waltz\", value: 1 },\r\n                      { name: \"Joseph Schildkraut\", value: 1 },\r\n                      { name: \"Maximillian Schell\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Wales\", value: 6, children: [\r\n                      { name: \"Ray Milland\", value: 1 },\r\n                      { name: \"Hugh Griffith\", value: 1 },\r\n                      { name: \"Catherine Zeta-Jones\", value: 2 },\r\n                      { name: \"Anthony Hopkins\", value: 2 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"France\", value: 4, children: [\r\n                      { name: \"Claudette Colbert\", value: 1 },\r\n                      { name: \"Jean Dujardin\", value: 1 },\r\n                      { name: \"Juliette Binoche\", value: 1 },\r\n                      { name: \"Marion Cotillard\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Italy\", value: 3, children: [\r\n                      { name: \"Anna Magnani\", value: 1 },\r\n                      { name: \"Roberto Benigni\", value: 1 },\r\n                      { name: \"Sophia Loren\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Russia\", value: 3, children: [\r\n                      { name: \"George Sanders\", value: 1 },\r\n                      { name: \"Lila Kedrova\", value: 1 },\r\n                      { name: \"Yul Brynner\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Germany\", value: 2, children: [\r\n                      { name: \"Luise Rainier\", value: 1 },\r\n                      { name: \"Simone Signoret\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Ireland\", value: 2, children: [\r\n                      { name: \"Barry Fitzgerald\", value: 1 },\r\n                      { name: \"Brenda Flicker\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Spain\", value: 2, children: [\r\n                      { name: \"Javier Bardem\", value: 1 },\r\n                      { name: \"Pen\u00e9lope Cruz\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Sweden\", value: 2, children: [\r\n                      { name: \"Alicia Vikander\", value: 1 },\r\n                      { name: \"Ingrid Bergman\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Belgium\", value: 1, children: [\r\n                      { name: \"Audrey Hepburn\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Greece\", value: 1, children: [\r\n                      { name: \"Katina Paxinou\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Hungary\", value: 1, children: [\r\n                      { name: \"Paul Lukas\", value: 1 }\r\n                    ]\r\n                  },\r\n            {\r\n                    name: \"Romania\", value: 1, children: [\r\n                      { name: \"John Houseman\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Scotland\", value: 1, children: [\r\n                      { name: \"Sean Connery\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Switzerland\", value: 1, children: [\r\n                      { name: \"Emil Jannings\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Ukraine\", value: 1, children: [\r\n                      { name: \"Paul Muni\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              },\r\n              {\r\n                name: \"America\", value: 14, children: [\r\n                  {\r\n                    name: \"Canada\", value: 11, children: [\r\n                      { name: \"Anna Paquin\", value: 1 },\r\n                      { name: \"Christopher Plumme\", value: 2 },\r\n                      { name: \"Harold Russell\", value: 1 },\r\n                      { name: \"Marie Dressler\", value: 2 },\r\n                      { name: \"Mary Pickford\", value: 2 },\r\n                      { name: \"Norma Shearer\", value: 2 },\r\n                      { name: \"Walter Huston\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Mexico\", value: 3, children: [\r\n                      { name: \"Anthony Quinn\", value: 2 },\r\n                      { name: \"Lupita Nyong\u2019o\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              },\r\n              {\r\n                name: \"Asia\", value: 10, children: [\r\n                  {\r\n                    name: \"Japan\", value: 4, children: [\r\n                      { name: \"Joan Fontaine\", value: 1 },\r\n                      { name: \"Miyoshi Umeki\", value: 1 },\r\n                      { name: \"Olivia de Havilland\", value: 2 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"India\", value: 2, children: [\r\n                      { name: \"Julie Christie\", value: 1 },\r\n                      { name: \"Vivien Leigh\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Cambodia\", value: 1, children: [\r\n                      { name: \"Haing S. Ngor\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Israel\", value: 1, children: [\r\n                      { name: \"Natalie Portman\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Malaysia\", value: 1, children: [\r\n                      { name: \"Michelle Yeoh\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"South Korea\", value: 1, children: [\r\n                      { name: \"Youn Yuh-jung\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              },\r\n              {\r\n                name: \"Oceania\", value: 3, children: [\r\n                  {\r\n                    name: \"Australia\", value: 2, children: [\r\n                      { name: \"Geoffrey Rush\", value: 1 },\r\n                      { name: \"Heath Ledger\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"New Zealand\", value: 1, children: [\r\n                      { name: \"Russell Crowe\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              },\r\n              {\r\n                name: \"Africa\", value: 1, children: [\r\n                  {\r\n                    name: \"South Africa\", value: 1, children: [\r\n                      { name: \"Charlize Theron\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              }\r\n            ]\r\n          }\r\n        ];\r\n        \/\/ create a sunburst chart and set the data\r\n        var chart = anychart.sunburst(data, \"as-tree\");\r\n        \/\/ set the chart title\r\n        chart.title(\"Non-U.S. Born Oscar Winners for Acting\");\r\n        \/\/ set the container id\r\n        chart.container(\"container\");\r\n        \/\/ initiate drawing the chart\r\n        chart.draw();\r\n      });\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Customizing JS Sunburst Chart<\/h2>\n<p>Congratulations on creating a fabulous sunburst chart using JavaScript! But why stop there when we can take it to the next level of coolness and interactivity? Brace yourself for some exciting and fun ideas to elevate your visualization even further. Let&#8217;s dive into these cool enhancements and make this diagram shine like never before!<\/p>\n<h3>1. Enhance the tooltip<\/h3>\n<p>Currently, when we hover over an entity in the sunburst chart, the tooltip only displays its name. But let&#8217;s take it up a notch and make the tooltip more informative. We&#8217;ll format it to show not only the name of the entity but also the total number of Oscars received by actors and actresses, countries, and continents at each level.<\/p>\n<pre><code class=\"javascript\">chart.tooltip().useHtml(true);\r\nchart.tooltip().format(\"&lt;h5 style='font-size:14px; font-weight:400; margin: 0.25rem 0;'&gt;{%name}&lt;\/h5&gt;&lt;h5 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'&gt;Total Oscars: {%value}&lt;\/h5\");<\/code><\/pre>\n<p>With this enhancement, the tooltip will provide a comprehensive overview of the accolades garnered by various entities in the chart.<\/p>\n<p><iframe sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\n                 allow-popups allow-modals allow-forms\" frameBorder=\"0\" class=\"anychart-embed anychart-embed-zMZLoCtL\"\n        allowtransparency=\"true\" allowfullscreen=\"true\"\n        src=\"https:\/\/playground.anychart.com\/zMZLoCtL\/iframe\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-zMZLoCtL{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>2. Enhance the coloring<\/h3>\n<p>Adding a personal touch to your work is always a great idea, and one way to do that is by playing with colors. Let&#8217;s take our sunburst chart to the next level by setting a custom color palette.<\/p>\n<p>To achieve this, we&#8217;ll use the <code>palette()<\/code> function and pass an array of color codes that we desire for our chart. By selecting an appropriate color scheme, we can create a visually appealing and harmonious chart that suits our style.<\/p>\n<pre><code class=\"javascript\">chart.palette(['#345E80', '#00838F', '#00BFA5', '#ff6e40', '#d4e157', '#64B5F6']);<\/code><\/pre>\n<p>Feel free to experiment with different color combinations and unleash your creativity.<\/p>\n<p><iframe sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\n                 allow-popups allow-modals allow-forms\" frameBorder=\"0\" class=\"anychart-embed anychart-embed-t4Sssnpg\"\n        allowtransparency=\"true\" allowfullscreen=\"true\"\n        src=\"https:\/\/playground.anychart.com\/t4Sssnpg\/iframe\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-t4Sssnpg{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>3. Set the parent-dependent calculation mode<\/h3>\n<p>Gain even more insightful visualizations from our JS-based sunburst chart, let&#8217;s change the calculation mode to &#8216;parent-dependent\u2019 by using the <code>calculationMode()<\/code> function to compare the levels of data based on their values.<\/p>\n<p>With this adjustment, the size of each segment in the chart corresponds to the values it represents. In our current view, Europe, having the highest number of Oscar-winning actors and actresses born outside the U.S., takes the spotlight as the largest segment.<\/p>\n<pre><code class=\"javascript\">chart.calculationMode(\"parent-dependent\");<\/code><\/pre>\n<p><iframe sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\n                 allow-popups allow-modals allow-forms\" frameBorder=\"0\" class=\"anychart-embed anychart-embed-8AXRoj6G\"\n        allowtransparency=\"true\" allowfullscreen=\"true\"\n        src=\"https:\/\/playground.anychart.com\/8AXRoj6G\/iframe\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-8AXRoj6G{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>4. Customize the labels<\/h3>\n<p>Now, let&#8217;s give our chart a clean and organized look by configuring the labels. We want to ensure that the information displayed is easily readable and visually appealing.<\/p>\n<p>We can start by focusing on the top-level center of our sunburst chart. It&#8217;s an opportunity to add text that captures the essence of your data. Additionally, we have the flexibility to adjust various aspects of the label, such as the font color, size, weight, and so on.<\/p>\n<pre><code class=\"javascript\">\/\/ create and configure a label for the center content\r\nlet label = anychart.standalones.label();\r\nlabel.text(\"Non-U.S. born\");\r\nlabel.width(\"100%\");\r\nlabel.height(\"100%\");\r\nlabel.fontColor(\"#64B5F6\");\r\nlabel.fontSize(12);\r\nlabel.fontWeight(600);\r\nlabel.hAlign(\"center\");\r\nlabel.vAlign(\"middle\");\r\n\/\/ set the center content\r\nchart.center().content(label);\r\n\/\/ set a space for the center content\r\nchart.innerRadius(50);\r\n\/\/ hide the world level\r\nchart.level(0).thickness(\"0%\");<\/code><\/pre>\n<p>Let\u2019s also refine the label\u2019s format and rotate the country names:<\/p>\n<pre><code class=\"javascript\">\/\/ configure the label format\r\nchart.labels().format(\"{%name}\");\r\n\r\n\/\/ apply the radial position\r\nchart.level(2).labels().position(\"radial\");<\/code><\/pre>\n<p><iframe sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\n                 allow-popups allow-modals allow-forms\" frameBorder=\"0\" class=\"anychart-embed anychart-embed-7sPwrSmK\"\n        allowtransparency=\"true\" allowfullscreen=\"true\"\n        src=\"https:\/\/playground.anychart.com\/7sPwrSmK\/iframe\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-7sPwrSmK{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>5. Sort in ascending order<\/h3>\n<p>After all the customizations, we can further enhance the organization of the sunburst chart by setting the components in ascending order based on the total number of Oscars won at each level. This provides a clearer perspective on the distribution of Oscars across different levels.<\/p>\n<pre><code class=\"javascript\">chart.sort(\"asc\");<\/code><\/pre>\n<p>And voila! With these modifications, we have successfully created an interactive, fully-functional, and visually appealing JavaScript (HTML5) sunburst chart. It&#8217;s truly astonishing to see how a little bit of fun, creativity, and a few lines of code can result in such a remarkable visualization.<\/p>\n<p>You can find the complete code, including all the customizations we&#8217;ve made, below. If you&#8217;re eager to experiment further with the chart, feel free to open it on the <a href=\"https:\/\/playground.anychart.com\/mmP5LrD4\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.<\/p>\n<p><iframe sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\n                 allow-popups allow-modals allow-forms\" frameBorder=\"0\" class=\"anychart-embed anychart-embed-mmP5LrD4\"\n        allowtransparency=\"true\" allowfullscreen=\"true\"\n        src=\"https:\/\/playground.anychart.com\/mmP5LrD4\/iframe\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-mmP5LrD4{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;JavaScript Sunburst Chart&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-sunburst.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style type=\"text\/css\"&gt;      \r\n      html, body, #container { \r\n        width: 100%; \r\n        height: 100%; \r\n        margin: 0; \r\n        padding: 0; \r\n      } \r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      anychart.onDocumentReady(function(){\r\n        \/\/ create the data\r\n        var data = [\r\n          {\r\n            name: \"World\", value: 115, children: [\r\n              {\r\n                name: \"Europe\", value: 87, children: [\r\n                  {\r\n                    name: \"England\", value: 53, children: [\r\n                      { name: \"Alec Guinness\", value: 1 },\r\n                      { name: \"Ben Kingsley\", value: 1 },\r\n                      { name: \"Charles Laughton\", value: 2 },\r\n                      { name: \"Colin Firth\", value: 1 },\r\n                      { name: \"Daniel Day-Lewis\", value: 3 },\r\n                      { name: \"Daniel Kaluuya\", value: 1 },\r\n                      { name: \"David Niven\", value: 1 },\r\n                      { name: \"Donald Crisp\", value: 1 },\r\n                      { name: \"Eddie Redmayne\", value: 1 },\r\n                      { name: \"Edmund Gwenn\", value: 1 },\r\n                      { name: \"Elizabeth Taylor\", value: 2 },\r\n                      { name: \"Emma Thompson\", value: 1 },\r\n                      { name: \"Gary Oldman\", value: 1 },\r\n                      { name: \"George Arliss\", value: 2 },\r\n                      { name: \"Glenda Jackson\", value: 2 },\r\n                      { name: \"Greer Garson\", value: 1 },\r\n                      { name: \"Helen Mirren\", value: 1 },\r\n                      { name: \"Jeremy Irons\", value: 1 },\r\n                      { name: \"Jessica Tandy\", value: 1 },\r\n                      { name: \"Jim Broadbent\", value: 1 },\r\n                      { name: \"John Gielgud\", value: 1 },\r\n                      { name: \"John Mills\", value: 1 },\r\n                      { name: \"Judi Dench\", value: 1 },\r\n                      { name: \"Julie Andrews\", value: 1 },\r\n                      { name: \"Kate Winslet\", value: 1 },\r\n                      { name: \"Laurence Olivier\", value: 1 },\r\n                      { name: \"Maggie Smith\", value: 3 },\r\n                      { name: \"Margaret Rutherford\", value: 1 },\r\n                      { name: \"Mark Rylance\", value: 1 },\r\n                      { name: \"Michael Caine\", value: 2 },\r\n                      { name: \"Olivia Colman\", value: 1 },\r\n                      { name: \"Paul Scofield\", value: 1 },\r\n                      { name: \"Peggy Ashcroft\", value: 1 },\r\n                      { name: \"Peter Finch\", value: 1 },\r\n                      { name: \"Peter Ustinov\", value: 2 },\r\n                      { name: \"Rachel Weisz\", value: 1 },\r\n                      { name: \"Rex Harrison\", value: 1 },\r\n                      { name: \"Robert Donat\", value: 1 },\r\n                      { name: \"Ronald Colman\", value: 1 },\r\n                      { name: \"Tilda Swinton\", value: 1 },\r\n                      { name: \"Vanessa Redgrave\", value: 1 },\r\n                      { name: \"Victor McLaglen\", value: 1 },\r\n                      { name: \"Wendy Hiller\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Austria\", value: 3, children: [\r\n                      { name: \"Christoph Waltz\", value: 1 },\r\n                      { name: \"Joseph Schildkraut\", value: 1 },\r\n                      { name: \"Maximillian Schell\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Wales\", value: 6, children: [\r\n                      { name: \"Ray Milland\", value: 1 },\r\n                      { name: \"Hugh Griffith\", value: 1 },\r\n                      { name: \"Catherine Zeta-Jones\", value: 2 },\r\n                      { name: \"Anthony Hopkins\", value: 2 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"France\", value: 4, children: [\r\n                      { name: \"Claudette Colbert\", value: 1 },\r\n                      { name: \"Jean Dujardin\", value: 1 },\r\n                      { name: \"Juliette Binoche\", value: 1 },\r\n                      { name: \"Marion Cotillard\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Italy\", value: 3, children: [\r\n                      { name: \"Anna Magnani\", value: 1 },\r\n                      { name: \"Roberto Benigni\", value: 1 },\r\n                      { name: \"Sophia Loren\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Russia\", value: 3, children: [\r\n                      { name: \"George Sanders\", value: 1 },\r\n                      { name: \"Lila Kedrova\", value: 1 },\r\n                      { name: \"Yul Brynner\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Germany\", value: 2, children: [\r\n                      { name: \"Luise Rainier\", value: 1 },\r\n                      { name: \"Simone Signoret\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Ireland\", value: 2, children: [\r\n                      { name: \"Barry Fitzgerald\", value: 1 },\r\n                      { name: \"Brenda Flicker\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Spain\", value: 2, children: [\r\n                      { name: \"Javier Bardem\", value: 1 },\r\n                      { name: \"Pen\u00e9lope Cruz\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Sweden\", value: 2, children: [\r\n                      { name: \"Alicia Vikander\", value: 1 },\r\n                      { name: \"Ingrid Bergman\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Belgium\", value: 1, children: [\r\n                      { name: \"Audrey Hepburn\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Greece\", value: 1, children: [\r\n                      { name: \"Katina Paxinou\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Hungary\", value: 1, children: [\r\n                      { name: \"Paul Lukas\", value: 1 }\r\n                    ]\r\n                  },\r\n            {\r\n                    name: \"Romania\", value: 1, children: [\r\n                      { name: \"John Houseman\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Scotland\", value: 1, children: [\r\n                      { name: \"Sean Connery\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Switzerland\", value: 1, children: [\r\n                      { name: \"Emil Jannings\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Ukraine\", value: 1, children: [\r\n                      { name: \"Paul Muni\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              },\r\n              {\r\n                name: \"America\", value: 14, children: [\r\n                  {\r\n                    name: \"Canada\", value: 11, children: [\r\n                      { name: \"Anna Paquin\", value: 1 },\r\n                      { name: \"Christopher Plumme\", value: 2 },\r\n                      { name: \"Harold Russell\", value: 1 },\r\n                      { name: \"Marie Dressler\", value: 2 },\r\n                      { name: \"Mary Pickford\", value: 2 },\r\n                      { name: \"Norma Shearer\", value: 2 },\r\n                      { name: \"Walter Huston\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Mexico\", value: 3, children: [\r\n                      { name: \"Anthony Quinn\", value: 2 },\r\n                      { name: \"Lupita Nyong\u2019o\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              },\r\n              {\r\n                name: \"Asia\", value: 10, children: [\r\n                  {\r\n                    name: \"Japan\", value: 4, children: [\r\n                      { name: \"Joan Fontaine\", value: 1 },\r\n                      { name: \"Miyoshi Umeki\", value: 1 },\r\n                      { name: \"Olivia de Havilland\", value: 2 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"India\", value: 2, children: [\r\n                      { name: \"Julie Christie\", value: 1 },\r\n                      { name: \"Vivien Leigh\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Cambodia\", value: 1, children: [\r\n                      { name: \"Haing S. Ngor\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Israel\", value: 1, children: [\r\n                      { name: \"Natalie Portman\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"Malaysia\", value: 1, children: [\r\n                      { name: \"Michelle Yeoh\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"South Korea\", value: 1, children: [\r\n                      { name: \"Youn Yuh-jung\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              },\r\n              {\r\n                name: \"Oceania\", value: 3, children: [\r\n                  {\r\n                    name: \"Australia\", value: 2, children: [\r\n                      { name: \"Geoffrey Rush\", value: 1 },\r\n                      { name: \"Heath Ledger\", value: 1 }\r\n                    ]\r\n                  },\r\n                  {\r\n                    name: \"New Zealand\", value: 1, children: [\r\n                      { name: \"Russell Crowe\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              },\r\n              {\r\n                name: \"Africa\", value: 1, children: [\r\n                  {\r\n                    name: \"South Africa\", value: 1, children: [\r\n                      { name: \"Charlize Theron\", value: 1 }\r\n                    ]\r\n                  }\r\n                ]\r\n              }\r\n            ]\r\n          }\r\n        ];\r\n        \/\/ create a sunburst chart and set the data\r\n        var chart = anychart.sunburst(data, \"as-tree\");\r\n        \/\/ set the chart title\r\n        chart.title(\"Non-U.S. Born Oscar Winners for Acting\");\r\n        \/\/ format the tooltip\r\n        chart.tooltip().useHtml(true);\r\n        chart.tooltip().format(\"&lt;h5 style='font-size:14px; font-weight:400; margin: 0.25rem 0;'&gt;{%name}&lt;\/h5&gt;&lt;h5 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'&gt;Total Oscars: {%value}&lt;\/h5\");\r\n        \/\/ set a custom palette\r\n        chart.palette(['#345E80', '#00838F', '#00BFA5', '#ff6e40', '#d4e157', '#64B5F6']);\r\n        \/\/ set the parent-dependent calculation mode\r\n        chart.calculationMode(\"parent-dependent\");\r\n        \/\/ create and configure a label for the center content\r\n        let label = anychart.standalones.label();\r\n        label.text(\"Non-U.S. born\");\r\n        label.width(\"100%\");\r\n        label.height(\"100%\");\r\n        label.fontColor(\"#64B5F6\");\r\n        label.fontSize(12);\r\n        label.fontWeight(600);\r\n        label.hAlign(\"center\");\r\n        label.vAlign(\"middle\");\r\n        \/\/ set the center content\r\n        chart.center().content(label);\r\n        \/\/ set a space for the center content\r\n        chart.innerRadius(50);\r\n        \/\/ hide the world level\r\n        chart.level(0).thickness(\"0%\");\r\n        \/\/ configure the label format\r\n        chart.labels().format(\"{%name}\");\r\n        \/\/ apply the radial position\r\n        chart.level(2).labels().position(\"radial\");\r\n        \/\/ set the ascending order\r\n        chart.sort(\"asc\");\r\n        \/\/ set the container id\r\n        chart.container(\"container\");\r\n        \/\/ initiate drawing the chart\r\n        chart.draw();\r\n      });\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>I hope you&#8217;ve enjoyed the journey of creating a mesmerizing sunburst diagram. Continue learning with the <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Sunburst_Chart\" target=\"_blank\" rel=\"nofollow\">sunburst chart documentation<\/a>, and check out the gallery of <a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/Sunburst_Charts\/\">sunburst chart examples<\/a> for inspiration.<\/p>\n<p>Now that you&#8217;ve acquired the skills to craft such stunning visualizations, it&#8217;s time to let your creativity soar. Don&#8217;t be afraid to venture into uncharted territories, explore different <a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Supported_Charts_Types\" target=\"_blank\" rel=\"nofollow\">chart types<\/a>, and push the boundaries of what&#8217;s possible.<\/p>\n<p>If you have any questions or need further assistance, don&#8217;t hesitate to reach out. I&#8217;m here to support you on your learning journey. Now, go forth and create captivating visualizations that will captivate your audience.<\/p>\n<p>Happy charting and happy learning!<\/p>\n<hr \/>\n<p><strong><em>A big thank you to Awan Shrestha for creating this fantastic Sunburst Chart tutorial exclusively for our blog!<\/p>\n<p>Don&#8217;t miss out on other <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\">JavaScript charting tutorials<\/a> on our blog!<\/p>\n<p>If you have an idea for a nice guest post, <a href=\"https:\/\/www.anychart.com\/support\/\">let&#8217;s discuss it<\/a>!<\/em><\/strong><\/p>\n<hr \/>\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>In the world of data all around us, charts play a crucial role in helping us explore and understand data more effectively. One powerful visualization technique is the sunburst chart, which allows us to represent hierarchical datasets, providing insights into complex compositions visually. In this tutorial, I&#8217;ll show you how to create your own stunning [&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":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,263,23,13,279,4],"tags":[3567,843,619,618,3173,260,3149,284,471,266,620,1292,880,806,3352,509,294,257,2220,2838,461,1389,2757,256,3377,1111,744,844,165,313,1370,774,2225,2226,1498,805,1154,1762,2884,2885,2013,2014,32,55,77,1335,144,2979,2016,146,79,152,2949,151,36,907,141,249,3111,81,57,76,1238,142,96,99,58,65,56,78,101,3526,3568,3569,3566,304,2986,1226,3099,2221,2222,172,807,808,832,954,3100,293,745,899,3565,2816,1763,804,996,1181,1182],"class_list":["post-16693","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-big-data","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-academy-awards","tag-advanced-data-visualization","tag-analysis","tag-analytics","tag-app-development","tag-best-data-visualization-examples","tag-chart-development","tag-chart-examples","tag-data-analysis","tag-data-analytics","tag-data-analytics-examples","tag-data-chart","tag-data-charting","tag-data-charts","tag-data-graphic","tag-data-graphics","tag-data-science","tag-data-stories","tag-data-visual","tag-data-visualisation","tag-data-visualization-101","tag-data-visualization-best-pracices","tag-data-visualization-development","tag-data-visualization-examples","tag-data-visualization-guide","tag-data-visualization-practice","tag-data-visualization-techniques","tag-data-visualization-tutorial","tag-data-visualizations","tag-data-visuals","tag-data-viz-examples","tag-dataviz-examples","tag-drill-down","tag-drill-down-chart","tag-example","tag-front-end-development","tag-good-data-visualization","tag-guest-post","tag-hierarchical-data","tag-hierarchical-data-visualization","tag-html","tag-html-charts","tag-html5","tag-html5-charts","tag-html5-dashboards","tag-infographic","tag-infographics","tag-information-graphics","tag-information-visualization","tag-interactive-data-visualization","tag-interactive-html5-dashboard","tag-interactive-infographic","tag-interactive-infographics","tag-interactive-visualizations","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-api","tag-javascript-charting-features","tag-javascript-charting-library","tag-javascript-charts","tag-javascript-dashboards","tag-javascript-graph","tag-javascript-graphics","tag-javascript-graphics-library","tag-javascript-library","tag-js-chart","tag-js-charting","tag-js-charts","tag-js-dashboards","tag-js-graphics","tag-js-library","tag-oscar-winning-actors","tag-oscar-winning-actresses","tag-oscars","tag-programming","tag-statistic-visualization","tag-statistics-visualization","tag-storytelling-examples","tag-sunburst-chart","tag-sunburst-diagram","tag-tutorial","tag-visual-analysis","tag-visual-analytics","tag-visual-data","tag-visual-data-analytics","tag-visual-storytelling-examples","tag-visualization","tag-visualization-techniques","tag-visualizations","tag-wanderu","tag-web-design","tag-web-developers","tag-web-development","tag-wikipedia","tag-wikipedia-data","tag-wikipedia-data-visualization","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Sunburst Chart: Learn What It Is &amp; How to Make It with JavaScript<\/title>\n<meta name=\"description\" content=\"Learn sunburst charts and how to create these visualizations using JavaScript. Explore the birthplaces of Oscar winners for acting as an example.\" \/>\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\/2023\/06\/19\/sunburst-chart-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Sunburst Chart in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Learn sunburst charts and how to create these visualizations using JavaScript. Explore the birthplaces of Oscar winners for acting as an example.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/\" \/>\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=\"2023-06-19T10:18:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-19T15:54:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js-social.png\" \/>\n<meta name=\"author\" content=\"Awan Shrestha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create a Sunburst Chart in JavaScript\" \/>\n<meta name=\"twitter:description\" content=\"Learn sunburst charts and how to create these visualizations using JavaScript. Explore the birthplaces of Oscar winners for acting as an example.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js-social.png\" \/>\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=\"Awan Shrestha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/\"},\"author\":{\"name\":\"Awan Shrestha\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1\"},\"headline\":\"How to Make Sunburst Chart in JavaScript\",\"datePublished\":\"2023-06-19T10:18:54+00:00\",\"dateModified\":\"2023-06-19T15:54:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/\"},\"wordCount\":1979,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png\",\"keywords\":[\"Academy Awards\",\"advanced data visualization\",\"analysis\",\"analytics\",\"app development\",\"best data visualization examples\",\"chart development\",\"chart examples\",\"data analysis\",\"data analytics\",\"data analytics examples\",\"data chart\",\"data charting\",\"data charts\",\"data graphic\",\"data graphics\",\"data science\",\"data stories\",\"data visual\",\"data visualisation\",\"data visualization 101\",\"data visualization best practices\",\"data visualization development\",\"data visualization examples\",\"data visualization guide\",\"data visualization practice\",\"data visualization techniques\",\"data visualization tutorial\",\"data visualizations\",\"data visuals\",\"data viz examples\",\"dataviz examples\",\"drill down\",\"drill down chart\",\"example\",\"front-end development\",\"good data visualization\",\"guest post\",\"hierarchical data\",\"hierarchical data visualization\",\"HTML\",\"HTML charts\",\"HTML5\",\"html5 charts\",\"html5 dashboards\",\"infographic\",\"infographics\",\"information graphics\",\"information visualization\",\"interactive data visualization\",\"interactive html5 dashboard\",\"interactive infographic\",\"interactive infographics\",\"interactive visualizations\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"javascript charting api\",\"JavaScript charting features\",\"JavaScript charting library\",\"javascript charts\",\"javascript dashboards\",\"javascript graph\",\"javascript graphics\",\"JavaScript graphics library\",\"JavaScript library\",\"js chart\",\"js charting\",\"js charts\",\"js dashboards\",\"JS graphics\",\"js library\",\"Oscar-winning actors\",\"Oscar-winning actresses\",\"Oscars\",\"programming\",\"statistic visualization\",\"statistics visualization\",\"storytelling examples\",\"sunburst chart\",\"sunburst diagram\",\"tutorial\",\"visual analysis\",\"visual analytics\",\"visual data\",\"visual data analytics\",\"visual storytelling examples\",\"visualization\",\"visualization techniques\",\"visualizations\",\"Wanderu\",\"web design\",\"web developers\",\"web development\",\"wikipedia\",\"Wikipedia data\",\"Wikipedia data visualization\"],\"articleSection\":[\"AnyChart Charting Component\",\"Big Data\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/\",\"name\":\"Sunburst Chart: Learn What It Is & How to Make It with JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png\",\"datePublished\":\"2023-06-19T10:18:54+00:00\",\"dateModified\":\"2023-06-19T15:54:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1\"},\"description\":\"Learn sunburst charts and how to create these visualizations using JavaScript. Explore the birthplaces of Oscar winners for acting as an example.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Make Sunburst Chart in JavaScript\"}]},{\"@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\/3f107fdcb3fe326a63cd52812f5287c1\",\"name\":\"Awan Shrestha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g\",\"caption\":\"Awan Shrestha\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/awan-shrestha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sunburst Chart: Learn What It Is & How to Make It with JavaScript","description":"Learn sunburst charts and how to create these visualizations using JavaScript. Explore the birthplaces of Oscar winners for acting as an example.","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\/2023\/06\/19\/sunburst-chart-js\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Sunburst Chart in JavaScript","og_description":"Learn sunburst charts and how to create these visualizations using JavaScript. Explore the birthplaces of Oscar winners for acting as an example.","og_url":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2023-06-19T10:18:54+00:00","article_modified_time":"2023-06-19T15:54:44+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js-social.png","type":"","width":"","height":""}],"author":"Awan Shrestha","twitter_card":"summary_large_image","twitter_title":"How to Create a Sunburst Chart in JavaScript","twitter_description":"Learn sunburst charts and how to create these visualizations using JavaScript. Explore the birthplaces of Oscar winners for acting as an example.","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js-social.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Awan Shrestha","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/"},"author":{"name":"Awan Shrestha","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1"},"headline":"How to Make Sunburst Chart in JavaScript","datePublished":"2023-06-19T10:18:54+00:00","dateModified":"2023-06-19T15:54:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/"},"wordCount":1979,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png","keywords":["Academy Awards","advanced data visualization","analysis","analytics","app development","best data visualization examples","chart development","chart examples","data analysis","data analytics","data analytics examples","data chart","data charting","data charts","data graphic","data graphics","data science","data stories","data visual","data visualisation","data visualization 101","data visualization best practices","data visualization development","data visualization examples","data visualization guide","data visualization practice","data visualization techniques","data visualization tutorial","data visualizations","data visuals","data viz examples","dataviz examples","drill down","drill down chart","example","front-end development","good data visualization","guest post","hierarchical data","hierarchical data visualization","HTML","HTML charts","HTML5","html5 charts","html5 dashboards","infographic","infographics","information graphics","information visualization","interactive data visualization","interactive html5 dashboard","interactive infographic","interactive infographics","interactive visualizations","JavaScript","javascript chart tutorial","javascript charting","javascript charting api","JavaScript charting features","JavaScript charting library","javascript charts","javascript dashboards","javascript graph","javascript graphics","JavaScript graphics library","JavaScript library","js chart","js charting","js charts","js dashboards","JS graphics","js library","Oscar-winning actors","Oscar-winning actresses","Oscars","programming","statistic visualization","statistics visualization","storytelling examples","sunburst chart","sunburst diagram","tutorial","visual analysis","visual analytics","visual data","visual data analytics","visual storytelling examples","visualization","visualization techniques","visualizations","Wanderu","web design","web developers","web development","wikipedia","Wikipedia data","Wikipedia data visualization"],"articleSection":["AnyChart Charting Component","Big Data","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/","url":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/","name":"Sunburst Chart: Learn What It Is & How to Make It with JavaScript","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png","datePublished":"2023-06-19T10:18:54+00:00","dateModified":"2023-06-19T15:54:44+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1"},"description":"Learn sunburst charts and how to create these visualizations using JavaScript. Explore the birthplaces of Oscar winners for acting as an example.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/06\/sunburst-chart-js.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2023\/06\/19\/sunburst-chart-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Make Sunburst Chart in JavaScript"}]},{"@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\/3f107fdcb3fe326a63cd52812f5287c1","name":"Awan Shrestha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g","caption":"Awan Shrestha"},"url":"https:\/\/www.anychart.com\/blog\/author\/awan-shrestha\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16693","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\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=16693"}],"version-history":[{"count":14,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16693\/revisions"}],"predecessor-version":[{"id":16719,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16693\/revisions\/16719"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=16693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=16693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=16693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}