{"id":16916,"date":"2023-09-28T08:09:21","date_gmt":"2023-09-28T08:09:21","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16916"},"modified":"2023-09-29T12:53:30","modified_gmt":"2023-09-29T12:53:30","slug":"js-pie-charts","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/09\/28\/js-pie-charts\/","title":{"rendered":"How to Build Pie Charts with JavaScript"},"content":{"rendered":"

\"Pie<\/a>The pie chart, a widely used chart type<\/a> yet also a topic of debate here<\/a> and there<\/a>, has cemented its place in the realm of data visualization. When used appropriately<\/a>, it provides an intuitive insight into the composition of data, with each slice of the pie representing a distinct component. In this tutorial, I’ll guide you through a straightforward path of creating interactive pie charts using JavaScript.<\/p>\n

Every chart begins with data. To demonstrate the concepts in this tutorial, I decided to visualize the composition of the Indian Premier League<\/a> (IPL) winnership over its 16-season history.<\/p>\n

Whether you’re a novice or an experienced coder, get ready to immediately acquire the valuable skills of crafting visually appealing JS-based pie charts from scratch.<\/p>\n

<\/p>\n

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

Steps to Create a JS Pie Chart<\/h2>\n

The toss is done, and it’s time to step onto the field. Come along as I guide you through crafting a functional, interactive pie chart with JavaScript in just four straightforward steps.<\/p>\n

1. Setting the stage<\/h3>\n

Before we dive into code, let’s prepare our canvas. Every chart needs a container, so we’ll start by creating a simple HTML page. Within it, we’ll define a container element with a unique ID to host our pie chart. If you want the chart to fill the entire page, set the container’s width and height parameters in CSS to 100%.<\/p>\n

<html>\r\n  <head>\r\n    <title>Pie Chart in JS<\/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. Gathering tools<\/h3>\n
Building a JavaScript pie graph from scratch can be a daunting task, but we’re in luck! There are plenty of JS charting libraries that provide pre-built functions and features, making data visualization development seamless. For this tutorial, I\u2019ve chosen the AnyChart<\/a> JS library, suitable for beginners and experts alike, but feel free to use your favorite one as the logic of the process will be the same.<\/p>\n
We\u2019ll connect the necessary library files from a content delivery network (CDN). These scripts will reside in the <head><\/code> section of our HTML page, setting the stage for our pie chart. The JavaScript code itself will be placed between the <script><\/code> and <\/script><\/code> tags, which can be added to either the <head><\/code> or the <body><\/code> sections.<\/p>\n
<html>\r\n  <head>\r\n    <title>Pie Chart in JS<\/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 Pie Chart will come here\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
3. Adding data<\/h3>\n
Charts rely on data, and we’ve got options for how to incorporate it. In this tutorial, we’ll manually input the data directly into our JavaScript charting code. However, keep in mind that you can, of course, also fetch data from databases or files.<\/p>\n
let data = anychart.data.set([\r\n  [\"Chennai Super Kings\", 5],\r\n  [\"Mumbai Indians\", 5],\r\n  [\"Kolkatta Knight Riders\", 2],\r\n  [\"Deccan Chargers\", 1],\r\n  [\"Gujarat Titans\", 1],\r\n  [\"Rajasthan Royal\", 1],\r\n  [\"Sunrisers Hyderabad\", 1],\r\n]);<\/code><\/pre>\n
4. Writing a JavaScript charting code<\/h3>\n
Now, let’s transition from scoring singles to hitting those thrilling fours and sixes. You’ll see how just a few lines of code can create an interactive JS pie chart in no time.<\/p>\n
Firstly, to ensure everything runs smoothly, we enclose all our code within a function. This guarantees that our chart-building process only begins after the page has fully loaded. The data goes directly there as the first ball.<\/p>\n
anychart.onDocumentReady(function () {\r\n  \/\/ add the data\r\n  let data = anychart.data.set([\r\n    [\"Chennai Super Kings\", 5],\r\n    [\"Mumbai Indians\", 5],\r\n    [\"Kolkatta Knight Riders\", 2],\r\n    [\"Deccan Chargers\", 1],\r\n    [\"Gujarat Titans\", 1],\r\n    [\"Rajasthan Royal\", 1],\r\n    [\"Sunrisers Hyderabad\", 1]\r\n  ]);\r\n  \/\/ The upcoming JS code goes here...\r\n});<\/code><\/pre>\n
Now, for the game-changing moment \u2014 we create a pie chart instance with a single line of code.<\/p>\n
let chart = anychart.pie(data);<\/code><\/pre>\n
To provide context to our pie graphic and help viewers understand its purpose, let\u2019s add a descriptive title.<\/p>\n
chart.title(\"IPL Winnership Over 16 Seasons\");<\/code><\/pre>\n
Lastly, we refer to the HTML element designated earlier as the chart container and, with a simple command, draw the resulting pie chart.<\/p>\n
chart.container(\"container\");\r\nchart.draw();<\/code><\/pre>\n
And there you have it! A nice chart that vividly visualizes the composition of the IPL winnership over the entire span of 16 seasons. You’ll notice that the top two teams dominate, accounting for almost two-thirds of all IPL titles during this period. Feel free to explore the initial version here<\/a> with the code; the complete HTML\/CSS\/JS code is also below.<\/p>\n