Easypiechart-v2

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.

Renderer

It supports HTML-Canvas and SVG.

Usage

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

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

Options

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

Development

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>

Test

TODO: Jest