Svelte Charts

Description

A set of simple svelte charts that are:

• TypeScript First
• Auto-Fitting
• Animated
• Customizable With Props
• Easy To Use

Demo

Demo Site

Installation

npm install --save-dev @bobbymannino/svelte-charts

Usage

<!-- +page.svelte -->

<script lang="ts">
    import { BarChart, ScatterGraph } from "@bobbymannino/svelte-charts";

    let data = [500, 800, 24, 58];
</script>

<!-- The chart will fit to your container, this is an example one -->
<div style="width: 100px; height: 100px">
    <BarChart {data} />
</div>
<div style="width: 100px; height: 100px">
    <ScatterGraph {data} />
</div>

Configuration

<!-- +page.svelte -->

<script lang="ts">
    import { BarChart } from "@bobbymannino/svelte-charts";

    let data = [500, 800, 24, 58];
</script>

<!-- The chart will fit to your container, this is an example one -->
<div style="width: 100px; height: 100px">
    <BarChart {data} rounding="pill" color="#ff0000" />
</div>

Note: 'rounding' only works on 'BarChart' component

Bugs & Features

Submit all bugs and/or feature requests to the issues panel panel on GitHub