Author: | lilave232 |
---|---|
Views Total: | 2,452 views |
Official Page: | Go to website |
Last Update: | December 16, 2019 |
License: | MIT |
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(); }