donut-chart-js

Simple donut chart with canvas

Usage no npm install needed!

<script type="module">
  import donutChartJs from 'https://cdn.skypack.dev/donut-chart-js';
</script>

README

Donut Chart JS

preview

Donut-Chart-JS

NPM npm

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.