How to create pie chart in html?
This article explains how to create a pie chart in HTML. In JavaScript, a pie chart is a circular graphic that is ideal for displaying proportional values between different categories in a JavaScript chart.
Let’s see how to create a simple pie chart in HTML5.
Step-1: Adding Script file
Include ej2.min.js script file in your sample. It contains all dependencies require to render the pie chart.
pie.html <html> <head> // Adding ej2.min.js CDN link <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> </head> </html>
Step-2: Creating chart container
Create a container for the pie chart to get render.
pie.html <html> <body> // Accumulation Pie Chart container <div id="container"></div> </body> </html>
Step-3: Creating the pie chart
Here are the steps for creating the pie chart:
- Create chart instance by using new ej.charts.AccumulationChart ().
- Assign the data using the dataSource property in series.
- Bind the Browser and Number of usage count to xName and yName properties in series.
- Now append the accumulation chart instance to the container to render the pie chart.
Basic Pie Chart
Consider the following data to render the pie chart.
Mobile Browser Statistics | |
Browser | Number of usage count |
Chrome | 37 |
UC Browser | 17 |
iPhone | 19 |
Others | 4 |
Opera | 11 |
Android | 12 |
// pie.html
<html>
<head>
// Adding ej2.min.js CDN link
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script>
var pie = new ej.charts.AccumulationChart({
//Initializing Series
series: [
{
dataSource: [
{ 'x': 'Chrome', y: 37 }, { 'x': 'UC Browser', y: 17 },
{ 'x': 'iPhone', y: 19 },
{ 'x': 'Others', y: 4 }, { 'x': 'Opera', y: 11 },
{ 'x': 'Android', y: 12 }
],
dataLabel: {
visible: true,
position: 'Inside',
},
xName: 'x',
yName: 'y'
}
],
});
pie.appendTo('#container');
</script>
</body>
</html>
Adding Title
Accumulation Chart can be given a title using the title property, to show the information about the data plotted.
var pie = new ej.charts.AccumulationChart({
//Initializing Title
title: "Mobile Browser Statistics",
legendSettings: {
visible: false,
}
});
pie.appendTo('#container');
Adding Legend
Legend enabled in pie chart by default. The legend for a point can be collapsed by assigning an empty string to the x value of the point.
var pie = new ej.charts.AccumulationChart({
//Initializing Title
title: "Mobile Browser Statistics",
legendSettings: {
visible: false,
}
});
pie.appendTo('#container');
Adding data label
You can add data labels to improve the readability of the pie chart. This data label can be added to a pie chart series by enabling the visible option in the dataLabel property.
var pie = new ej.charts.AccumulationChart({
series: [
{
dataLabel: {
visible: true,
},
}
],
});
pie.appendTo('#container');
Adding Tooltip
The tooltip is useful when you cannot display information using the data labels due to space constraints. Tooltip for the accumulation chart can be enabled by using the enable property.
var pie = new ej.charts.AccumulationChart({
//Initializing Tooltip
tooltip: { enable: true, header: 'Browser', format: '${point.x}:<b> ${point.y}%<b>' },
});
pie.appendTo('#container');
Adding start and end angles
You can customize the start and end angle of the pie series using the startAngle and endAngle properties. The default value of startAngle is 0 degrees, and endAngle is 360 degrees. By customizing this, you can achieve a semi-pie series.
var pie = new ej.charts.AccumulationChart({
//Initializing Series
series: [
{
startAngle: 270,
endAngle: 90,
},
],
});
pie.appendTo('#container');
Customizing the border
Customize the border color and width using the border property in the series.
var pie = new ej.charts.AccumulationChart({
//Initializing Series
series: [
{
border: {
color: 'black',
width: 4
},
},
],
});
pie.appendTo('#container');
Customizing the size of the pie chart
By default, radius of the pie series will be 80% of the size (the minimum of the chart's width and height). You can customize this using the radius property of the series.
var pie = new ej.charts.AccumulationChart({
//Initializing Series
series: [
{
radius: '30%',
},
],
});
pie.appendTo('#container');
Conclusion
We hope you enjoyed learning about how to create Pie Chart in html.
You can refer to our JavaScript Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our JavaScript Chart documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
