How to make a pie chart in javascript

2 mins read

How to create pie chart in js?

JavaScript pie chart is a circular graphic, which is ideal for displaying proportional values between different categories.

Let’s see, how to create simple pie chart in js.

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 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>
   // Adding pie.js script file
    <script src="pie.js" type="text/javascript"></script>
 
 
</head>
 
</html>

// pie.js 
 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 }
            ],
            //Map the field names in the JSON data to the xName and yName properties of the series.
            xName: 'x',
            yName: 'y',
        }
    ],
});
pie.appendTo('#container');

default-pie-chart

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');

pie-chart-title

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');

pie-legend

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');

pie-chart-data-label

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');

pie-tooltip

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');

pie-start-end-angle

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');

pie-border

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');

pie-size

Did you find this information helpful?

Yes

Comments