How to implement bar and pie charts using Chart.js ?
In this article, we will learn to implement basic bar graphs and pie charts using the Chart JS CDN library.
Approach:
- In the HTML design, use the <canvas> tag for showing the bar or pie chart graph.
- In the script part of the code, instantiate the ChartJS object by setting the type, data and options properties of the library.
- type: The type can take values like “pie”,”bar”, and “line” by the ChartJS library.
- data: It sets the labels and datasets that contain the data array and other display-related properties.
- options: It sets the axis direction, title chart, and display flag as a boolean value as true or false.
CDN link:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js”></script>
Example 1: The following code shows a basic vertical graph for the students learning various computer science technology using the Chart JS library.
HTML
<!DOCTYPE html><html><head> <title>Chart JS Bar Chart </title> <script src= </script> <script src= </script></head><body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3>Chart JS Bar Chart </h3> <div> <canvas id="barChartID"></canvas> </div> </div> <script> // Bar chart new Chart($("#barChartID"), { type: 'bar', options: { legend: { display: true }, indexAxis: 'x', title: { display: true, text: 'Bar Chart using ChartJS library' } }, data: { labels: ["C++", "Java", "Blockchain", "PHP", "Python","HTML"], datasets: [ { label: "Technology Learned by Students", backgroundColor: ["#FFC0CB", "#0000FF", "#00FFFF", "#FFA500", "#FF7F50","#FF0000"], data: [234, 356, 819, 732, 213, 542] } ] } }); </script></body></html> |
Output:
Example 2: The following code shows a basic pie chart graph for the students learning various computer science technology using the Chart JS library.
HTML
<!DOCTYPE html><html><head> <title>Chart JS Bar Chart </title> <script src= </script> <script src= </script></head><body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3>Chart JS Bar Chart </h3> <div> <canvas id="barChartID"></canvas> </div> </div> <script> // Bar chart new Chart($("#barChartID"), { type: 'bar', options: { legend: { display: true }, indexAxis: 'x', title: { display: true, text: 'Bar Chart using ChartJS library' } }, data: { labels: ["C++", "Java", "Blockchain", "PHP", "Python","HTML"], datasets: [ { label: "Technology Learned by Students", backgroundColor: ["#FFC0CB", "#0000FF", "#00FFFF", "#FFA500", "#FF7F50","#FF0000"], data: [234, 356, 819, 732, 213, 542] } ] } }); </script></body></html> |
Output:
Please Login to comment...