{"id":13005,"date":"2021-07-06T08:04:13","date_gmt":"2021-07-06T08:04:13","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=13005"},"modified":"2022-08-13T11:06:23","modified_gmt":"2022-08-13T11:06:23","slug":"donut-charts-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/07\/06\/donut-charts-javascript\/","title":{"rendered":"How to Build JavaScript Donut Charts"},"content":{"rendered":"

\"BuildingWondering\u00a0how\u00a0data designers and developers create\u00a0compelling\u00a0donut charts using JavaScript?\u00a0Then you’ve come to the right place at the right time.\u00a0Follow along and you\u00a0will learn\u00a0how to build an interactive JS donut\u00a0chart with great\u00a0ease even if you are a beginner!<\/p>\n

In\u00a0this tutorial, we will be visualizing\u00a0data about the global market share of the top online music streaming platforms. It is a good example of information that can be nicely represented in a donut chart.<\/p>\n

To make sure we are on the same page, let’s first see what a donut chart is and then get down to charting straight away!<\/p>\n

<\/p>\n

What Is Donut Chart?<\/h2>\n

Basically, donut charts<\/a> (or doughnut charts)\u00a0are\u00a0pie charts<\/a>\u00a0with a\u00a0cut-out area of the center which can be filled with additional information.\u00a0They\u00a0are frequently used as a way to\u00a0visualize the proportions of categorical data.<\/p>\n

In a donut chart, the size of each slice (or piece)\u00a0depicts how much of the total each category represents. Consequently,\u00a0this type of data visualization\u00a0can help\u00a0you\u00a0quickly understand the proportional composition of a variable.<\/p>\n

As a rule of thumb, the number of categories visualized in a donut chart\u00a0graphic\u00a0should be limited to a few to keep the\u00a0representation uncluttered and avoid legibility issues.<\/p>\n

JS Donut Chart Preview<\/h2>\n

Take a look at how the JS donut chart will turn out at the end of this tutorial. And it will be interactive!<\/p>\n

\"Interactive<\/p>\n

Building Basic JavaScript Donut Chart<\/h2>\n

A beautiful JS donut chart can be built in just\u00a0four easy steps. Isn\u2019t that music to our ears?<\/p>\n

    \n
  1. Create an HTML page.<\/li>\n
  2. Include JavaScript files.<\/li>\n
  3. Add the data.<\/li>\n
  4. Write some JS charting code.<\/li>\n<\/ol>\n

    1. Create an HTML page<\/h3>\n

    The first thing we do is create a basic HTML page with a block element designed to hold the donut chart.<\/p>\n

    To identify this <div><\/code> later in the code, we give it an id attribute. Let it be just \u201ccontainer\u201d this time.<\/p>\n

    We also specify the width<\/code> and height<\/code> parameters inside the <style><\/code> block as “100%” so the donut chart fills the whole page.<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Donut Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0  html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    2. Include JavaScript files<\/h3>\n
    There are many JavaScript charting libraries out there providing ready-made features that are of great help to quickly visualize data in graphs even without a lot of technical skills and experience. Some of them support donut charts out of the box.<\/p>\n
    In this tutorial, we are using the AnyChart JS library<\/a>. It is a lightweight, strong, and flexible solution for interactive data visualization. AnyChart is\u00a0also great for beginners because of extensive and detailed\u00a0documentation<\/a>\u00a0and a whole lot of chart examples<\/a>\u00a0with the source code that can be\u00a0played with on the dedicated playground<\/a>.<\/p>\n
    So, as step two, let’s\u00a0include the necessary JavaScript files from the\u00a0library’s\u00a0CDN<\/a>\u00a0(or you can download them if you want).<\/p>\n
    AnyChart’s JavaScript charting library features a modular system to ensure optimal performance. To create an interactive HTML5 donut chart using it, we need to add two scripts \u2014 the core module<\/a> and the pie-and-donut module<\/a> \u2014 to the <head><\/code> section of the HTML page.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Donut Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-pie.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0  html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0  } \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the code for the JS donut chart will come here\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Add the data<\/h3>\n
    A donut chart is a simple chart type that requires a\u00a0straightforward and limited dataset. So, although AnyChart supports\u00a0multiple ways to\u00a0load data<\/a>, we\u00a0will just pass\u00a0the data directly in a hassle-free manner.<\/p>\n
    For this tutorial, I decided to take\u00a0data on the market share of the leading music streaming apps, which I collected from the Business of Apps<\/a> website. So, I am just adding it as shown below:<\/p>\n
    var data = anychart.data.set([\r\n  ['Spotify', 34],\r\n  ['Apple Music', 21],\r\n  ['Amazon Music', 15],\r\n  ['Tencent apps', 11],\r\n  ['YouTube Music', 6],\r\n  ['Others', 13]\r\n]);<\/code><\/pre>\n
    Now that we have everything all set, let\u2019s get ready to see the donut chart shape up by adding\u00a0some JavaScript code! Basically,\u00a0this is quite intuitive.<\/p>\n
    4. Write\u00a0the\u00a0JS charting code for our donut chart<\/h3>\n
    The first thing we do is add a function enclosing all the code, which makes sure that the code inside it will only execute once the page is ready.<\/p>\n
    Donut charts\u00a0are very\u00a0straightforward to create with an appropriate JS library and in this case, it will actually be just a couple of lines of code!<\/p>\n
    As we have learned just above, a donut chart is fundamentally a pie chart with a hole, like a ring all in all.\u00a0So, we simply create a pie chart instance and give it an inner radius value to make it a donut chart.<\/p>\n
    \/\/ create a pie chart with the data\r\nvar chart = anychart.pie(data)\r\n\/\/ set the chart radius making a donut chart\r\nchart.innerRadius('55%');<\/code><\/pre>\n
    Then we give our donut chart a title and set the container id before finally drawing\u00a0the resulting visualization.<\/p>\n
    chart.title('Music Streaming Apps Global Market Share')\r\nchart.container('container');\r\nchart.draw();<\/code><\/pre>\n
    That\u2019s it \u2014 a fully functional interactive JavaScript-based donut chart is ready! Isn\u2019t this absolutely easy?<\/p>\n
    Notice\u00a0that the legend was created automatically. Also, go ahead and click on its items or any piece to see the cool\u00a0interactive donut slicing behavior.<\/p>\n