Svelte Tiny Linked Charts screenshot

Svelte Tiny Linked Charts

Author Avatar Theme by Mitcheljager
Updated: 7 Feb 2025
93 Stars

Svelte Tiny Linked Charts

Categories

Overview

The Svelte Tiny Linked Charts library is designed to display small bar charts that act as graphic aids. These charts do not include axis labels or extensive data visualizations. Instead, they focus on providing a simple and compact representation of data.

Features

  • Data Display: Display data in a simple key:value object or supply labels and values separately.
  • Linking Charts: Link multiple charts together using a shared key.
  • Customization: Customize the height, width, bar width, colors, and other properties of the chart.
  • Interaction: Hover over charts to display values and execute click handlers.

Installation

To install the Svelte Tiny Linked Charts library, you can use either Yarn or NPM. Here are the steps:

  1. Open your terminal.
  2. Run the command yarn add svelte-tiny-linked-charts or npm install svelte-tiny-linked-charts to install the library.
  3. Include the chart in your app by importing it: import { LinkedChart } from 'svelte-tiny-linked-charts';.
  4. Supply your data in a simple key:value object or separately supply labels and values.

Example code for including the chart in your app:

<script>
  import { LinkedChart } from 'svelte-tiny-linked-charts';

  const data = {
    label1: 10,
    label2: 20,
    label3: 15
  };
</script>

<LinkedChart {data} />

For more detailed documentation and configuration options, you can visit the Demo and Docs page.

Summary

The Svelte Tiny Linked Charts library is a lightweight solution for displaying compact and simple bar charts. It offers easy installation, customization options, and the ability to link multiple charts together. With its focus on graphic aids rather than extensive data visualization, this library is suitable for a wide range of applications.