Easy Canvas Based Pie Chart Component – pie-chart-js

Preview:

Description:

pie-chart-js is a small JavaScript component to render a simple, plain, responsive pie chart using HTML5 canvas and Custom Element.

How to use it:

1. Load the pie-chart-js.js library at the end of your HTML document.

<script src="pie-chart-js.js"></script>

2. Add slices (pie elements) with custom values & background colors to the pie chart component. That’s it.

<pie-chart id="pieChart">
  <pchart-element name="Rent" value="11000" colour="#00A676">
  <pchart-element name="Insurance" value="2100" colour="#373F51">
  <pchart-element name="Electricity" value="1100" colour="#008DD5">
  <pchart-element name="Gas" value="1250" colour="#DFBBB1">
  <pchart-element name="Internet" value="500" colour="#F56476">
  <pchart-element name="Phone" value="2000" colour="#E43F6F">
</pie-chart>

3. Adjust the size of the pie chart on window resize.

window.onresize = function() {
  var c = document.getElementById("pieChart");
  c.resize();
}