Donut Chart JS

Donut-Chart-JS

Simple Donut Chart using JavaScript and HTML5 Canvas.

Installation

yarn add donut-chart-js

or

npm install donut-chart-js

then

import DonutChart from 'donut-chart-js';

Usage

Create canvas element on your HTML

<canvas id="myChart" width="500px" height="500px"></canvas>

then write script

new DonutChart(document.getElementById('myChart'), {
  data: [
    { label: 'red', value: 120, color: '#F15F5F' },
    { label: 'green', value: 250, color: '#BCE55C' },
    { label: 'blue', value: 180, color: '#B2CCFF' },
    { label: 'yellow', value: 70, color: '#FFE08C' },
  ],
  holeSize: 0.6,
  animationSpeed: 0.5,
});

options

option	type	default	description
data.label	string	0	The name or label of the donut.
data.value	number	100	The value of the donut.
data.color	string	50	The color of the donut.
holeSize	number	0	(Optional) The hole size of the donut. Use 0-1 value.
animationSpeed	number	1	(Optional) The speed of chart animation. Use 0-1 value.