Doughnut-chart-js NPM

Donut Chart JS

Installation

yarn add donut-chart-js

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.

canvas chart graphs html5 pie chart donut chart

1.1.0

4 years ago