{"id":5085,"date":"2017-12-06T07:47:55","date_gmt":"2017-12-06T07:47:55","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=5085"},"modified":"2022-08-13T10:56:39","modified_gmt":"2022-08-13T10:56:39","slug":"pie-chart-create-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2017\/12\/06\/pie-chart-create-javascript\/","title":{"rendered":"How to Create Pie Chart with JavaScript"},"content":{"rendered":"

\"BuldingHave you ever wondered, how web developers create and integrate interactive JavaScript pie charts<\/strong> into HTML5 apps and web pages? If the answer is yes \u2013 keep on reading! This article explains how to create, change and integrate a pie chart<\/a> into your web page. Beware!<\/strong>\u00a0A hot-button political issue is present in this article. But we will not<\/strong> offend anyone!<\/p>\n

Pie chart is one of the most popular chart types. Mathematically speaking it looks like a circle divided into sectors which represent a part of a whole. For the most of us, pie charts look like real pies or pizzas cut into several slices. In this article, you will find a detailed tutorial on how to build one, with JS chart code samples.<\/p>\n

<\/p>\n

Creating JavaScript Pie Chart<\/h2>\n

There are four basic steps you should do to\u00a0make a chart of any type with a JavaScript charting library. Spend 5 minutes and you will\u00a0learn to add an interactive JS (HTML5) pie chart that looks like this to your web page:<\/p>\n

\"JavaScript<\/p>\n

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

The very first thing you need to do is to create a file in which you will put your chart later. Create a simple HTML page, set its title and create a container for the future chart:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>JavaScript Pie Chart<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\" style=\"width: 100%; height: 100%\"><\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
The width<\/code> and height<\/code> parameters of the container can be set in percents or in pixels. They are responsible for the chart\u2019s width and height. Setting them to “100%” will make the chart fill the whole page.<\/p>\n
Step 2. Reference all necessary files<\/h3>\n
The second step is about adding links into the <head><\/code> section. It is necessary to load the JavaScript charting library and create a tag where the whole code of our future pie chart sample will be put in:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n      <title>JavaScript Pie Chart<\/title>\r\n      <script src=\"https:\/\/cdn.anychart.com\/releases\/8.0.1\/js\/anychart-core.min.js\"><\/script>\r\n      <script src=\"https:\/\/cdn.anychart.com\/releases\/8.0.1\/js\/anychart-pie.min.js\"><\/script>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\" style=\"width: 100%; height: 100%\"><\/div>\r\n    <script>\r\n        <!-- chart code will be here -->\r\n    <\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
Step 3. Put the data together<\/h3>\n
The main purpose of creating a chart is to visualize data. So, it is clear that your data is the most important part of a chart and charting is only\u00a0a way to present data in a graphical, visual manner.<\/p>\n
If you choose\u00a0a wrong chart type to\u00a0visualize the data, you may mislead yourself or a chart viewer. So choose\u00a0the chart type wisely! If you don’t know what’s the difference between chart types, check out the Choosing Chart Type<\/a>\u00a0series of articles on our blog. You are also welcome to use this nifty tool,\u00a0Chartopedia;<\/a>\u00a0you’ll find Pie Chart<\/a> there and see that\u00a0this chart type is good to show Part Of The Whole<\/a>.<\/p>\n
Showing what some whole consists of is exactly what we are going to do now. We’ll see the composition of the whole<\/strong> American nation in terms of race. To\u00a0find out, let’s check out U.S. Department of Commerce Economics and Statistics Overview of Race and Hispanic Origin: 2010<\/a> and take some data from there:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
Population by Race for the United States: 2010 Census<\/b><\/td>\n<\/tr>\n
Race<\/b><\/td>\nNumber<\/b><\/td>\n<\/tr>\n
White<\/td>\n223,553,265<\/td>\n<\/tr>\n
Black or African American<\/td>\n38,929,319<\/td>\n<\/tr>\n
American Indian and Alaska Native<\/td>\n2,932,248<\/td>\n<\/tr>\n
Asian<\/td>\n14,674,252<\/td>\n<\/tr>\n
Native Hawaiian and Other Pacific Islander<\/td>\n540,013<\/td>\n<\/tr>\n
Some Other Race<\/td>\n19,107,368<\/td>\n<\/tr>\n
Two or More Races<\/td>\n9,009,073<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
If you looked at the original data table in the Census Brief, you may have noticed there is a separate column with percentages. The great thing about JavaScript charts is that you don’t need it, you can put in data, and the chart calculates everything:<\/p>\n
\/\/ set the data\r\nvar data = [\r\n    {x: \"White\", value: 223553265},\r\n    {x: \"Black or African American\", value: 38929319},\r\n    {x: \"American Indian and Alaska Native\", value: 2932248},\r\n    {x: \"Asian\", value: 14674252},\r\n    {x: \"Native Hawaiian and Other Pacific Islander\", value: 540013},\r\n    {x: \"Some Other Race\", value: 19107368},\r\n    {x: \"Two or More Races\", value: 9009073}\r\n];\r\n<\/code><\/pre>\n
Step 4. Write the chart code<\/h3>\n
This is the finishing step in creating an interactive JavaScript pie chart. Add the anychart.onDocumentReady<\/code> function. This function is executed when the page is ready. Create the chart entity, put it into the container and connect the data with the chart.<\/p>\n
anychart.onDocumentReady(function() {\r\n\r\n  \/\/ set the data\r\n  var data = [\r\n      {x: \"White\", value: 223553265},\r\n      {x: \"Black or African American\", value: 38929319},\r\n      {x: \"American Indian and Alaska Native\", value: 2932248},\r\n      {x: \"Asian\", value: 14674252},\r\n      {x: \"Native Hawaiian and Other Pacific Islander\", value: 540013},\r\n      {x: \"Some Other Race\", value: 19107368},\r\n      {x: \"Two or More Races\", value: 9009073}\r\n  ];\r\n\r\n  \/\/ create the chart\r\n  var chart = anychart.pie();\r\n\r\n  \/\/ set the chart title\r\n  chart.title(\"Population by Race for the United States: 2010 Census\");\r\n\r\n  \/\/ add the data\r\n  chart.data(data);\r\n\r\n  \/\/ display the chart in the container\r\n  chart.container('container');\r\n  chart.draw();\r\n\r\n});\r\n<\/code><\/pre>\n
Here’s how it looks:<\/p>\n
See the Pen Creating a JavaScript Pie Chart: Basic Example<\/a> by AnyChart JS Charts (@AnyChart<\/a>) on CodePen<\/a>.<\/p>\n