Svelte Sbchart

clydescobidal

A simple and lightweight baseline charting package for Svelte

Svelte SBChart
A simple and lightweight baseline charting package for Svelte

License Monthly downloads Total downloads

Installation

npm install svelte-sbchart

Usage

A basic usage

<template>
    <div style="width: 500px; height: 230px">
        <SvelteSBChart {series} {baseValue} {options} />
    </div>
</template>

import { SvelteSBChart } from 'svelte-sbchart';

const series = [
    { timestamp: 1656818225, value: 12 },
    { timestamp: 1656818226, value: 13 },
    { timestamp: 1656818227, value: 14 },
    { timestamp: 1656818228, value: 15 },
    { timestamp: 1656818229, value: 12.5 },
    { timestamp: 1656818230, value: 13 },
    { timestamp: 1656818231, value: 12 }
];
const baseValue = 13;
const options = {
    upColor: '#37eb34',
    downColor: '#eb3434',
    lineWidth: 1
};

Props

Property	Type	Description
series	Array	An array of objects containing value and UNIX timestamp properties
baseValue	float	The base value used to calculate high and low positions
options	Object	An object with customization properties (see below)
interactive	Boolean	Show pop-up on hover (default: true)
gridLines	Boolean	Enable grid lines background (default: true)

Options

You can customize the chart by passing an object in the component's options prop (see example above) with these properties: | Property | Type | Default | Description | | ----------- | ----------- | ---- | --- | upColor | string (hex) | #008000 | Gradient and line color when value is higher than the base value | downColor | string (hex) | #ff0000 | Gradient and line color when value is less than the base value | lineWidth | Number | 1 | The line size of stroke

License

Top categories