On this tutorial, we’re going to learn to create a pie chart utilizing JavaScript libraries. Now we have used Chart.js library for the producing the pie charts. As an alternate possibility, I’ve additionally offered a 3d pie chart instance utilizing Google charts library.
Allow us to see the next examples of making a pie chart utilizing JavaScript.
- Fast instance – Easy pie chart instance by way of ChartJS.
- 3D pie chart with Google Charts library.
- Responsive ChartJS pie chart.
Fast instance – Easy pie chart instance by way of ChartJS
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Pie Chart</title>
<hyperlink rel="stylesheet" href="https://phppot.com/javascript/chartjs-pie-chart/model.css" sort="textual content/css" />
</head>
<physique>
<div class="phppot-container">
<h1>Responsive Pie Chart</h1>
<div>
<canvas id="pie-chart"></canvas>
</div>
</div>
<script
src="https://cdn.jsdelivr.web/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script>
<script>
new Chart(doc.getElementById("pie-chart"), {
sort : 'pie',
knowledge : {
labels : [ "Lion", "Horse", "Elephant", "Tiger",
"Jaguar" ],
datasets : [ {
backgroundColor : [ "#51EAEA", "#FCDDB0",
"#FF9D76", "#FB3569", "#82CD47" ],
knowledge : [ 418, 263, 434, 586, 332 ]
} ]
},
choices : {
title : {
show : true,
textual content : 'Chart JS Pie Chart Instance'
}
}
});
</script>
</physique>
</html>
Making a ChartJS pie chart is a three-step course of as proven under.
- Add the ChartJS library embody to the pinnacle part of your HTML.
- Add a canvas factor to the HTML.
- Add the ChartJS class initiation and invoking script earlier than closing the HTML physique tag.
In regards to the ChartJS pie chart script
The script units the next properties to provoke the ChartJS library.
- sort – The kind of the chart supported by the ChartJS library.
- knowledge – It units the chart labels and datasets. The dataset comprises the info array and the show properties.
- choices – It units the chart title textual content and its show flag as a boolean true to indicate it on the browser.
Output:
In a earlier tutorial, we have now seen the varied methods of creating line charts utilizing the Chart JS library.
Creating 3D pie chart
There isn’t a possibility for a 3D pie chart utilizing chart JS. For these customers who’ve landed right here in search of a 3D pie chart, chances are you’ll strive Google Charts.
This instance makes use of Google Charts to create a 3D pie chart for a webpage. In a earlier code, we use Google Charts to render a bar chart to indicate college students’ attendance statistics.
The Google Charts JavaScript code prepares the array of animal distribution knowledge. This array is for sending it to the chart knowledge desk which helps to attract the pie chart.
The Google Charts library accepts the is3D with a boolean true to output a 3D pie chart.
It creates a chart visualization object with the reference with respect to the UI factor goal. Then, it calls the Google Charts library operate to attract and render the chart.
<!DOCTYPE html>
<html>
<head>
<title>3d Pie Chart JavaScript with Google Charts</title>
<hyperlink rel="stylesheet" href="https://phppot.com/javascript/chartjs-pie-chart/model.css" sort="textual content/css" />
<script sort="textual content/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script sort="textual content/javascript">
google.charts.load("present", {
packages : [ "corechart" ]
});
google.charts.setOnLoadCallback(drawChart);
operate drawChart() {
var knowledge = google.visualization.arrayToDataTable([
[ 'Animal', 'Distribution' ], [ 'Horse', 11 ],
[ 'Elephant', 2 ], [ 'Tiger', 2 ], [ 'Lion', 2 ],
[ 'Jaguar', 7 ] ]);
var choices = {
title : '3d Pie Chart JavaScript with Google Charts',
is3D : true,
};
var chart = new google.visualization.PieChart(doc
.getElementById('3d-pie-chart'));
chart.draw(knowledge, choices);
}
</script>
</head>
<physique>
<div class="phppot-container">
<h1>3d Pie Chart JavaScript with Google Charts</h1>
<div id="3d-pie-chart" model="width: 700px; top: 500px;"></div>
</div>
</physique>
</html>
Responsive pie chart utilizing Chart JS
The Chart JS library supplies JavaScript choices to make the output pie chart responsive.
This instance script makes use of these choices to render a responsive pie chart in a browser.
The JavaScript code to render a responsive pie chart is similar as we have now seen within the fast instance above.
The distinction is nothing however to set responsive: true within the ChartJS choices properties.
If you wish to create a responsive chart utilizing Google Charts, then the linked article has an instance.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Pie Chart</title>
<hyperlink rel="stylesheet" href="https://phppot.com/javascript/chartjs-pie-chart/model.css" sort="textual content/css" />
<meta identify="viewport" content material="width=device-width, initial-scale=1">
</head>
<physique>
<div class="phppot-container">
<h1>Responsive Pie Chart</h1>
<div>
<canvas id="pie-chart"></canvas>
</div>
</div>
<script
src="https://cdn.jsdelivr.web/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script>
<script>
new Chart(doc.getElementById("pie-chart"), {
sort : 'pie',
knowledge : {
labels : [ "Lion", "Horse", "Elephant", "Tiger",
"Jaguar" ],
datasets : [ {
backgroundColor : [ "#51EAEA", "#FCDDB0",
"#FF9D76", "#FB3569", "#82CD47" ],
knowledge : [ 418, 263, 434, 586, 332 ]
} ]
},
choices : {
title : {
show : true,
textual content : 'Responsive Pie Chart'
},
responsive : true
}
});
</script>
</physique>
</html>
