Basic Pie Chart In Pure JavaScript – ChartJS

Category: Chart & Graph , Javascript | November 1, 2019
Views Total:2,186 views
Official Page:Go to website
Last Update:November 1, 2019


Basic Pie Chart In Pure JavaScript – ChartJS


A minimal data plotting library that lets you render a basic pie chart on an HTML5 canvas element.

How to use it:

1. Insert the core JavaScript chartjs.js into the HTML file.

<script src="chartjs.js">

2. Create an empty canvas element on the page.

<canvas width="800" height="800" id="example">
  Sorry, canvas not supported

3. Define slices and numerical proportions for the pie chart.

var skills = {
    javascript: 0.3,
    html: 0.6,
    css: 0.1

4. Define colors for slices.

var colors = {
    javascript: 'green',
    html: 'blue',
    css: 'red'

5. Draw a pie chart on the page.

var canvas = document.getElementById('example');
var chart = chartJS.PieChart(elements, colors, canvas);

You Might Be Interested In:

Leave a Reply