{"id":16671,"date":"2023-06-13T08:29:27","date_gmt":"2023-06-13T08:29:27","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16671"},"modified":"2023-06-14T08:12:40","modified_gmt":"2023-06-14T08:12:40","slug":"donut-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/06\/13\/donut-chart-js\/","title":{"rendered":"How to Create Donut Chart Using JavaScript"},"content":{"rendered":"

\"Interactive<\/a>Visualizing data isn\u2019t just insightful, it\u2019s also a lot of fun! One of the simplest and most enjoyable charts you can create is the donut chart. And now, I will show you how to make an awesome interactive one using JavaScript effortlessly!<\/p>\n

Aptly named because it looks like a donut, a donut chart<\/a> is essentially a pie chart<\/a> with a hole in the center. It can be nice for representing categorical data with a moderate number of categories, where each slice represents a percentage of the whole. Throughout this tutorial, we will apply the donut charting technique to visualize the impressive Grand Slam title tally of a tennis legend, Roger Federer<\/a>. So you\u2019ll have a real-world example to work with and enhance your understanding.<\/p>\n

I\u2019ll guide you through each step, ensuring a seamless learning experience. By the end of the tutorial, you\u2019ll have all the skills and knowledge required to create your very own personalized and impressive JS donut chart. So let\u2019s embark on this exciting journey and get started!<\/p>\n

<\/p>\n

Donut Chart Preview<\/h2>\n

Here\u2019s a sneak peek at the donut chart we\u2019ll build by the end of this tutorial (and it will be interactive).<\/p>\n

\"JS<\/p>\n

Building a JavaScript Donut Chart in Four Steps<\/h2>\n

Let\u2019s dive into how you can quickly and easily create a beautiful and functional donut chart using JavaScript. The process can be split into four steps:<\/p>\n

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

      1. Create a basic HTML page<\/h3>\n

      To begin, let\u2019s create a basic HTML page with a <div><\/code> element to hold the donut chart. Give it an ID. Set the width and height to 100% with no margins or padding if you want to ensure that the chart renders full screen.<\/p>\n

      <html>\r\n  <head>\r\n    <title>JavaScript Donut Chart<\/title>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
      2. Include the necessary JavaScript files<\/h3>\n
      JavaScript charting libraries provide ready-to-use features that simplify chart development, even for those without extensive technical skills. There are many out there and the core principles are the same.<\/p>\n
      For this tutorial, we\u2019ll use a JS charting library called AnyChart<\/a> to create the donut. It\u2019s a lightweight and flexible data viz tool with many examples<\/a> and comprehensive documentation<\/a> to help you get started. To build a JavaScript donut chart, we need to include two scripts in our HTML page\u2019s <head><\/code> section: the core module and the pie module.<\/p>\n
      <html>\r\n  <head>\r\n    <title>JavaScript Donut Chart<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-pie.min.js\"><\/script>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>  \r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ All the code for the JS donut chart will come here\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
      3. Add the data<\/h3>\n
      So, let\u2019s take a look at the composition of Roger Federer\u2019s Grand Slam title tally. You\u2019ve probably heard of him even if you\u2019re not a tennis fan. Given his recent retirement, it\u2019s an interesting data set to explore.<\/p>\n
      Let\u2019s add this data (collated from Wikipedia<\/a>) as a simple array:<\/p>\n
      var data = anychart.data.set([\r\n  [\"Wimbledon\", 8],\r\n  [\"Australian Open\", 6],\r\n  [\"US Open\", 5],\r\n  [\"Roland Garros\", 1]\r\n]);<\/code><\/pre>\n
      4. Write the JavaScript code for our chart<\/h3>\n
      Here\u2019s the exciting part: creating the donut chart visualization with just a few lines of JavaScript code.<\/p>\n
      First, add the anychart.onDocumentReady()<\/code> function that ensures the web page is ready before executing the code. The rest of the JS code is to be placed within this function, and let’s start with setting the data:<\/p>\n
      anychart.onDocumentReady(function () {\r\n  var data = anychart.data.set([\r\n    [\"Wimbledon\", 8],\r\n    [\"Australian Open\", 6],\r\n    [\"U.S. Open\", 5],\r\n    [\"French Open\", 1]\r\n  ]);\r\n});<\/code><\/pre>\n
      Then, in the same function, create a pie chart and define an inner radius to give it that donut appearance.<\/p>\n
      var chart = anychart.pie(data)\r\n  .innerRadius('50%');<\/code><\/pre>\n
      Let\u2019s also give the chart a title. Then set the container. And finally, draw the chart.<\/p>\n
      chart.title('Grand Slam Titles Won by Roger Federer');\r\nchart.container('container');\r\nchart.draw();<\/code><\/pre>\n
      Aha! Look at that lovely, functional, JavaScript-based donut chart we\u2019ve created! Let\u2019s be honest here \u2014 it was as smooth as Roger Federer\u2019s backhand! You can check out the interactive version with the entire code on the playground<\/a> and even click on the slices to see the cool slicing animation. Don\u2019t forget to explore the automatically generated legend by clicking on it too!<\/p>\n