https://github.com/seogeurim/donut-chart-js

Simple Donut Chart using JavaScript and HTML5 Canvas 🍩
https://github.com/seogeurim/donut-chart-js

canvas chart donut-chart javascript

Last synced: about 2 months ago
JSON representation

Simple Donut Chart using JavaScript and HTML5 Canvas 🍩

• Host: GitHub
• URL: https://github.com/seogeurim/donut-chart-js
• Owner: Seogeurim
• License: mit
• Created: 2021-07-29T02:00:41.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-01T11:11:21.000Z (over 3 years ago)
• Last Synced: 2024-04-25T07:44:24.279Z (8 months ago)
• Topics: canvas, chart, donut-chart, javascript
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/donut-chart-js
• Size: 104 KB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Donut Chart JS



  



Donut-Chart-JS




  

    

  

  

    

  



Simple Donut Chart using JavaScript and HTML5 Canvas.


## Installation

```shell

yarn add donut-chart-js

```

or

```shell

npm install donut-chart-js

```

then

```js

import DonutChart from 'donut-chart-js';

```

## Usage

Create canvas element on your HTML

```html

```

then write script

```js

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