Rework of the Easy-Pie-Chart with Typescript

Usage no npm install needed!

<script type="module">
  import easyPieChartTypescript from 'https://cdn.skypack.dev/easy-pie-chart-typescript';



This is a rework from the v1 easy-pie-chart. The main reason is to export that awesome chart to a module.

It is rewritten in Typescript.


It supports HTML-Canvas and SVG. easypiechart


<div class="chart" data-percent="73">73%</div>

<script src="/path/to/easypiechart.js"></script>
  var element = document.querySelector(".chart");
  new EasyPieChart(element, {
    // your options goes here


You can pass these options to the initialize function to set a custom look and feel for the plugin.

Property (Type) Default Description
Renderer Canvas Render-Engine in order to output the Chart
barColor #ef1e25 The color of the curcular bar. You can either pass a valid css color string, or a function that takes the current percentage as a value and returns a valid css color string.
trackColor #f2f2f2 The color of the track, or false to disable rendering.
scaleColor #dfe0e0 The color of the scale lines, false to disable rendering.
scaleLength 5 Length of the scale lines (reduces the radius of the chart).
lineCap round Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
lineWidth 3 Width of the chart line in px.
size 110 Size of the pie chart in px. It will always be a square.
rotate 0 Rotation of the complete chart in degrees.
animate object Object with time in milliseconds and boolean for an animation of the bar growing ({ duration: 1000, enabled: true }), or false to deactivate animations.
easing defaultEasing Easing function or string with the name of a jQuery easing function


Parcel is used for the bundling which bundles the TS-Files in the src- folder. By simply using the npm run build command, it generates a easyPieChart.js in the dist- folder.

Note: Please, notice the camelcasing!

Get Started

npm i
npm run start

For now, I have pointed in the JS-File app.js to the dist- Folder and its easyPieChart.js. For Development, you should point to the src/easyPieChart.ts in app.js.

<script src="src/easyPieChart.ts"></script>


TODO: Jest