How To Create Pie Chart In Html5

This article will show you how to build a Pie Chart using the HTML5 canvas

Final Result

See the Pen Pie Chart Canvas HTML5 by Jonathan klughertz (@klugjo) on CodePen.

Project Description

This mini project / tutorial will give you an introduction on how to draw shapes in the canvas.

HTML

In our HTML file, we will simply insert a <canvas> element and specify a width and height.

                              <canvas                  id="canvas"                  width="600"                  height="600">                </canvas>

Draw a pie slice

Let's start by drawing a single Pie slice.

Canvas initialization

Let's create a draw() function that will be executed on a window.onload. We can then retrieve our canvas by it's id and create our context. The context objet is what will be used to draw our lines.

                                                function                  draw()                {              
                              var                canvas =                document.getElementById("canvas");              
                              var                ctx = canvas.getContext("2d");              
                                          
                                          
              }              
                            
                              window.onload = draw;

Draw a Pie Slice

To draw a Pie slice, we will:

Move to the (200, 200) coordinates
Start drawing an Arc with 120 radius and the center at (200, 200) and an angle of 0.3 PI
Continue tracing a line all the way back to the center

Here is the code

                                                function                  draw()                {              
                              var                canvas =                document.getElementById("canvas");              
                              var                ctx = canvas.getContext("2d");              
                                          
                                          
                              var                angle =                Math.PI *                0.3;              
                                          
                                          
                              ctx.beginPath();              
                                          
                                          
                              ctx.moveTo(200,                200);              
                                          
                                          
                                          
                              ctx.arc(200,                200,                120,                0, angle);              
                                          
                                          
                              ctx.lineTo(200,                200);              
                                          
                                          
                              ctx.stroke();              
              }

You might have realised that the initial line is drawn automatically: when we start drawing the arc, the path will automatically be linked from the initial position.

Here is what we have so far:

Draw the entire Pie

We will start with an array of angles which sum equals 2 PI and draw the all the slices.

We will also add a list of colours and for each slice, pick one and fill the slice with that color.

                                                function                  draw()                {              
                              var                canvas =                document.getElementById("canvas");              
                              var                ctx = canvas.getContext("2d");              
                                          
                                          
                              var                colors = ['#4CAF50',                '#00BCD4',                '#E91E63',                '#FFC107',                '#9E9E9E',                '#CDDC39'];              
                                          
                                          
                              var                angles = [Math.PI *                0.3,                Math.PI *                0.7,                Math.PI *                0.2,                Math.PI *                0.4,                Math.PI *                0.4];              
                                          
                                          
                              var                beginAngle =                0;              
                              var                endAngle =                0;              
                                          
                                          
                              for(var                i =                0; i < angles.length; i = i +                1) {              
                                          
                              beginAngle = endAngle;              
                                          
                              endAngle = endAngle + angles[i];              
                                          
                              ctx.beginPath();              
                                          
                              ctx.fillStyle = colors[i % colors.length];              
                                          
                                          
                              ctx.moveTo(200,                200);              
                              ctx.arc(200,                200,                120, beginAngle, endAngle);              
                              ctx.lineTo(200,                200);              
                              ctx.stroke();              
                                          
                                          
                              ctx.fill();              
                              }              
              }              
                            
                              window.onload = draw;

And this is where we are at:

Separate the slices

The last step consists of creating space in between the pie slices.

For each slice, the center has to be offset by (cos(mediumAngle) * offset, sin(mediumAngle) * offset) where:

mediumAngle is the angle formed by the origin and the slice bisector
offset is the base offset

All that is left to do is to implement that change:

                                                function                  draw()                {              
                              var                canvas =                document.getElementById("canvas");              
                              var                ctx = canvas.getContext("2d");              
                                          
                              var                colors = ['#4CAF50',                '#00BCD4',                '#E91E63',                '#FFC107',                '#9E9E9E',                '#CDDC39',                '#18FFFF',                '#F44336',                '#FFF59D',                '#6D4C41'];              
                              var                angles = [Math.PI *                0.3,                Math.PI *                0.7,                Math.PI *                0.2,                Math.PI *                0.4,                Math.PI *                0.4];              
                                          
                                          
                              var                offset =                10;              
                              var                beginAngle =                0;              
                              var                endAngle =                0;              
                                          
                                          
                              var                offsetX, offsetY, medianAngle;              
                                          
                              for(var                i =                0; i < angles.length; i = i +                1) {              
                              beginAngle = endAngle;              
                              endAngle = endAngle + angles[i];              
                                          
                                          
                              medianAngle = (endAngle + beginAngle) /                2;              
                                          
                                          
                              offsetX =                Math.cos(medianAngle) * offset;              
                              offsetY =                Math.sin(medianAngle) * offset;              
                                          
                              ctx.beginPath();              
                              ctx.fillStyle = colors[i % colors.length];              
                                          
                                          
                              ctx.moveTo(200                + offsetX,                200                + offsetY);              
                              ctx.arc(200                + offsetX,                200                + offsetY,                120, beginAngle, endAngle);              
                              ctx.lineTo(200                + offsetX,                200                + offsetY);              
                              ctx.stroke();              
                              ctx.fill();              
                              }              
              }              
                            
                              window.onload = draw;

And this is the final result:

See the Pen Pie Chart Canvas HTML5 by Jonathan klughertz (@klugjo) on CodePen.

Hope you have enjoyed this. Leave your questions in the comments below.