Donut Chart JS

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