Installation

npm install @kikytokamuro/donut-bar

Usage

import { DonutBar } from '@kikytokamuro/donut-bar';
import '@kikytokamuro/donut-bar/donut-bar.css';

const db = new DonutBar('#donut-bar', {
    title: 'My Chart',
    dark: false,
    displayTotal: true,
    thickness: 24,
    activeThickness: 32,
    size: 200,
    items: [
        { name: 'One',   value: 20, color: '#6a329f' },
        { name: 'Two',   value: 80, color: '#6a649f' },
        { name: 'Three', value: 10, color: '#6a969f' },
        { name: 'Four',  value: 40, color: '#6ac89f' },
        { name: 'Five',  value: 40, color: '#6afb9f' }
    ]
});

db.render();

API

Constructor

new DonutBar(elementSelector: string, data: DonutBarData)

DonutBarData

| Property | Type | Default | Description | | ---------------- | --------- | ------- | ---------------------------------------- | | title | string | - | Chart title | | dark | boolean | false | Enable dark theme | | displayTotal | boolean | true | Show total value in the center | | thickness | number | 24 | Ring thickness in pixels | | activeThickness| number | 32 | Ring thickness on hover / activation | | size | number | 200 | SVG canvas size in pixels | | items | Array | [] | Data segments (required) |

items[i]

| Property | Type | Description | | -------- | -------- | ----------------------- | | name | string | Segment label | | value | number | Segment value | | color | string | Segment color (hex/rgb) |

Methods

| Method | Description | | ---------- | ------------------------------------------ | | render() | Render the chart into the DOM | | clear() | Remove the chart from DOM |

Development

# Install dependencies
npm install

# Dev server
npm run dev

# Build for production
npm run build

# Watch mode
npm run build:watch