Installation

npm install @kikytokamuro/liner-bar

Usage

import { LinerBar } from '@kikytokamuro/liner-bar';
import '@kikytokamuro/liner-bar/liner-bar.css';

const lb = new LinerBar('#liner-bar', {
    title: 'My Chart',
    dark: false,
    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' }
    ]
});

lb.render();

API

Constructor

new LinerBar(elementSelector: string, data: LinerBarData)

LinerBarData

| Property | Type | Default | Description | | -------- | --------- | ------- | ------------------------ | | title | string | — | Chart title | | dark | boolean | false | Enable dark theme | | 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