Search code snippets, questions, articles... Chrome Extension

Create pie chart in Chart.js

var ctx = document.getElementById("pie_chart").getContext('2d');

var myChart = new Chart(ctx, {
   type: 'pie',
   data: {
      labels: ['Point 1', 'Point 2', 'Point 3', 'Point 4'],
      datasets: [{
         labels: "Pie chart",
         data: [20, 50, 40, 30],
         backgroundColor: ["red", "blue", "orange", "green"]
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

Add below code into your HTML

<canvas id="pie_chart" width="400" height="200"></canvas>

Live Demo

A pie chart can be created with Chart.js by adding Chart.js library on your webpage and creating a new instance of its function Chart(). You will also have to pass the chart type and data required to plot the chart. You can pass multiple objects into datasets array to plot multiple layers of pie chart into one chart.

Was this helpful?
Join Devsheet Ask a Question