{"id":130357,"date":"2022-12-07T09:52:53","date_gmt":"2022-12-07T09:52:53","guid":{"rendered":"https:\/\/phppot.com\/?p=20125"},"modified":"2022-12-07T09:52:53","modified_gmt":"2022-12-07T09:52:53","slug":"chart-js-pie-chart-example","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/12\/07\/chart-js-pie-chart-example\/","title":{"rendered":"Chart JS Pie Chart Example"},"content":{"rendered":"<div class=\"modified-on\" readability=\"7.1304347826087\"> by <a href=\"https:\/\/phppot.com\/about\/\">Vincy<\/a>. Last modified on December 7th, 2022.<\/div>\n<p>In this tutorial, we are going to learn how to create a pie chart using JavaScript libraries. We have used Chart.js library for the generating the pie charts. As an alternate option, I have also presented a 3d pie chart example using Google charts library.<\/p>\n<p>Let us see the following examples of creating a pie chart using JavaScript.<\/p>\n<ul>\n<li>Quick example \u2013 Simple pie chart example via ChartJS.<\/li>\n<li>3D pie chart with Google Charts library.<\/li>\n<li>Responsive ChartJS pie chart.<\/li>\n<\/ul>\n<h2>Quick example \u2013 Simple pie chart example via ChartJS<\/h2>\n<div class=\"post-section-highlight\" readability=\"53\">\n<pre class=\"prettyprint\"><code class=\"language-php-template\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Chart JS Pie Chart&lt;\/title&gt;\n&lt;link rel='stylesheet' href='style.css' type='text\/css' \/&gt;\n&lt;\/head&gt;\n&lt;body&gt; &lt;div class=\"phppot-container\"&gt; &lt;h1&gt;Responsive Pie Chart&lt;\/h1&gt; &lt;div&gt; &lt;canvas id=\"pie-chart\"&gt;&lt;\/canvas&gt; &lt;\/div&gt; &lt;\/div&gt; &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.0.1\/dist\/chart.umd.min.js\"&gt;&lt;\/script&gt; &lt;script&gt; new Chart(document.getElementById(\"pie-chart\"), { type : 'pie', data : { labels : [ \"Lion\", \"Horse\", \"Elephant\", \"Tiger\", \"Jaguar\" ], datasets : [ { backgroundColor : [ \"#51EAEA\", \"#FCDDB0\", \"#FF9D76\", \"#FB3569\", \"#82CD47\" ], data : [ 418, 263, 434, 586, 332 ] } ] }, options : { title : { display : true, text : 'Chart JS Pie Chart Example' } } }); &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<\/div>\n<p>Creating a ChartJS pie chart is a three-step process as shown below.<\/p>\n<ol>\n<li>Add the ChartJS library include to the head section of your HTML.<\/li>\n<li>Add a canvas element to the HTML.<\/li>\n<li>Add the ChartJS class initiation and invoking script before closing the HTML body tag.<\/li>\n<\/ol>\n<h3>About the ChartJS pie chart script<\/h3>\n<p>The script sets the following properties to initiate the ChartJS library.<\/p>\n<ul>\n<li><em>type<\/em> \u2013 The type of the chart supported by the ChartJS library.<\/li>\n<li><em>data<\/em> \u2013 It sets the chart labels and datasets. The dataset contains the data array and the display properties.<\/li>\n<li><em>options<\/em> \u2013 It sets the chart title text and its display flag as a boolean true to show it on the browser.<\/li>\n<\/ul>\n<p><strong>Output:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-20136\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/chartjs-pie-chart-550x561.jpg\" alt=\"chartjs pie chart\" width=\"550\" height=\"561\" srcset=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/chartjs-pie-chart-550x561.jpg 550w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/chartjs-pie-chart-294x300.jpg 294w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/chartjs-pie-chart-768x783.jpg 768w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/chartjs-pie-chart.jpg 1000w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\"><\/p>\n<p>In a previous tutorial, we have seen the various ways of <a href=\"https:\/\/phppot.com\/javascript\/chartjs-line-chart\/\">creating line charts using the Chart JS library<\/a>.<\/p>\n<p><a class=\"demo\" href=\"https:\/\/phppot.com\/demo\/chartjs-pie-chart\/\">View Demo<\/a><\/p>\n<h2>Creating 3D pie chart<\/h2>\n<p>There is no option for a 3D pie chart using chart JS. For those users who have landed here looking for a 3D pie chart, you may try Google Charts.<\/p>\n<p>This example uses Google Charts to create a 3D pie chart for a webpage. In a previous code, we use <a href=\"https:\/\/phppot.com\/php\/how-to-render-attendance-graph-using-google-charts\/\">Google Charts to render a bar chart<\/a> to show students\u2019 attendance statistics.<\/p>\n<p>The Google Charts JavaScript code prepares the array of animal distribution data. This array is for sending it to the chart data table which helps to draw the pie chart.<\/p>\n<p>The Google Charts library accepts the <strong>is3D<\/strong> with a boolean&nbsp;<em>true<\/em> to output a 3D pie chart.<\/p>\n<p>It creates a chart visualization object with the reference with respect to the UI element target. Then, it calls the Google Charts library function to draw and render the chart.<\/p>\n<pre class=\"prettyprint\"><code class=\"language-php-template\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;3d Pie Chart JavaScript with Google Charts&lt;\/title&gt;\n&lt;link rel='stylesheet' href='style.css' type='text\/css' \/&gt; &lt;script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt; google.charts.load(\"current\", { packages : [ \"corechart\" ] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ [ 'Animal', 'Distribution' ], [ 'Horse', 11 ], [ 'Elephant', 2 ], [ 'Tiger', 2 ], [ 'Lion', 2 ], [ 'Jaguar', 7 ] ]); var options = { title : '3d Pie Chart JavaScript with Google Charts', is3D : true, }; var chart = new google.visualization.PieChart(document .getElementById('3d-pie-chart')); chart.draw(data, options); }\n&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt; &lt;div class=\"phppot-container\"&gt; &lt;h1&gt;3d Pie Chart JavaScript with Google Charts&lt;\/h1&gt; &lt;div id=\"3d-pie-chart\" style=\"width: 700px; height: 500px;\"&gt;&lt;\/div&gt; &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-20144\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/3d-pie-chart-550x444.jpg\" alt=\"3d pie chart\" width=\"550\" height=\"444\" srcset=\"https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/3d-pie-chart-550x444.jpg 550w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/3d-pie-chart-300x242.jpg 300w, https:\/\/phppot.com\/wp-content\/uploads\/2022\/12\/3d-pie-chart.jpg 600w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\"><\/p>\n<h2>Responsive pie chart using Chart JS<\/h2>\n<p>The Chart JS library provides JavaScript options to make the output pie chart responsive.<\/p>\n<p>This example script uses those options to render a responsive pie chart in a browser.<\/p>\n<p>The JavaScript code to render a responsive pie chart is the same as we have seen in the quick example above.<\/p>\n<p>The difference is nothing but to set&nbsp;<strong>responsive: true<\/strong> in the ChartJS&nbsp;<em>options<\/em> properties.<\/p>\n<p>If you want to <a href=\"https:\/\/phppot.com\/php\/draw-responsive-charts-pie-bar-column-using-google-charts\/\">create a responsive chart using Google Charts<\/a>, then the linked article has an example.<\/p>\n<pre class=\"prettyprint\"><code class=\"language-php-template\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Responsive Pie Chart&lt;\/title&gt;\n&lt;link rel='stylesheet' href='style.css' type='text\/css' \/&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n&lt;\/head&gt;\n&lt;body&gt; &lt;div class=\"phppot-container\"&gt; &lt;h1&gt;Responsive Pie Chart&lt;\/h1&gt; &lt;div&gt; &lt;canvas id=\"pie-chart\"&gt;&lt;\/canvas&gt; &lt;\/div&gt; &lt;\/div&gt; &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.0.1\/dist\/chart.umd.min.js\"&gt;&lt;\/script&gt; &lt;script&gt; new Chart(document.getElementById(\"pie-chart\"), { type : 'pie', data : { labels : [ \"Lion\", \"Horse\", \"Elephant\", \"Tiger\", \"Jaguar\" ], datasets : [ { backgroundColor : [ \"#51EAEA\", \"#FCDDB0\", \"#FF9D76\", \"#FB3569\", \"#82CD47\" ], data : [ 418, 263, 434, 586, 332 ] } ] }, options : { title : { display : true, text : 'Responsive Pie Chart' }, responsive : true } }); &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p><a class=\"demo\" href=\"https:\/\/phppot.com\/demo\/chartjs-pie-chart\/\">View Demo<\/a><a class=\"download\" href=\"https:\/\/phppot.com\/downloads\/javascript\/chartjs-pie-chart.zip\">Download<\/a><\/p>\n<p> <!-- #comments --> <\/p>\n<div class=\"related-articles\">\n<h2>Popular Articles<\/h2>\n<\/p><\/div>\n<p> <a href=\"https:\/\/phppot.com\/javascript\/chartjs-pie-chart\/#top\" class=\"top\">\u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Vincy. Last modified on December 7th, 2022. In this tutorial, we are going to learn how to create a pie chart using JavaScript libraries. We have used Chart.js library for the generating the pie charts. As an alternate option, I have also presented a 3d pie chart example using Google charts library. Let us [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":130358,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-130357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/130357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=130357"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/130357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/130358"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=130357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=130357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=130357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}