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.
<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>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!
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