You are currently viewing How To Create Pie Chart Using JavaScript

How To Create Pie Chart Using JavaScript

How To Create Pie Chart Using JavaScript

Introduction:

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Pie Chart using HTML, CSS, and JavaScript. 

A pie chart is simply a data representation of the formal companies’ data using colors for values with a progress report. Most Of the big companies use this kind of representation to track their progress of data. Likewise, we are going to create this project.

So,  Let’s Begin Our Pie Chart Project By Adding The Source Codes of HTML, CSS, and JavaScript. For That First, We Are Using The Html Code.

HTML CODE For Pie Chart

<div class="container">
  <h2>Chart.js — Pie Chart Demo (apples)</h2>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

 

First We create a div class with a named container. Inside of class, we are adding the header tag h2 for adding the title to the project and then again we create a div tag and then add the canvas tag with id=”myChart” for creating the colors that represent data values. These are done with the help of CSS.

So Let’s move on to the CSS part for making a pie chart representation.

CSS CODE For Pie Chart

.container {
  width: 80%;
  margin: 15px auto;
}

 

Here we have used simple CSS which means we just call out the container class and add width and margin to it. Which makes a pie chart.

So That’s for CSS, Now we go for JS to add data with the correct color code and when we hover on the pie the data will be represented.

 

JavaScript CODE – Pie Chart

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["M", "T", "W", "T", "F", "S", "S"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [12, 19, 3, 17, 28, 24, 7]
    }]
  }
});

 

This Javascript code is easy and efficient when you understand it easily and for that let me explain it in easy steps.

STEP 1: First we create a variable and call out the myChart class using JavaScript Get Element Property. And fix it for 2d representation using context property.

STEP 2: Again we create a new class with assigning values in it. The values are type labels, data with required backgrounds, and finally the actual data values.

STEP 3: The Type value is declared to be pie with single quotes. Then Calling out data and inside of the data we just declared label values with weak names of the first letter and then the dataset’s background color were added for representing particular days with particular background colors.

STEP 4: Lastly, We are adding the data with a number which will be displayed when the mouse pointer is over on it.

So That’s all we have successfully added the source codes for the project. Now we can preview our project in the below Output Section.

 

FINAL OUTPUT – Pie Chart

Codepen preview Pie Chart Representation Using HTML, CSS, and JavaScript


Now We have Successfully created our Pie Chart Representation Using HTML, CSS, and JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

50+ Html , Css &Javascript Projects With Source Code

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Site Point

WRITTEN BY – Ragunathan S

Leave a Reply