How to create pie chart in html?
JavaScript Pie Chart is a circular graphic, which is ideal for displaying proportional values between different categories in JavaScript chart.
Let’s see, how to create simple pie chart in html5.
Step-1: Adding Script file
Include ej2.min.js script file in your sample. It contains all dependencies 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 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 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 be rendered 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 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 giving the 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 by 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 degree, 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 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 (minimum of chart width and height). You can customize this using radius property of the series
var pie = new ej.charts.AccumulationChart({
//Initializing Series
series: [
{
radius: '30%',
},
],
});
pie.appendTo('#container');
Conclusion
I hope you enjoyed learning about how to create Pie Chart in html.
You can refer to our JavaScript Chart feature tour page to know 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, Direct-Trac, or feedback portal. We are always happy to assist you!
