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:
- Open your terminal.
- Run the command
yarn add svelte-tiny-linked-chartsornpm install svelte-tiny-linked-chartsto install the library. - Include the chart in your app by importing it:
import { LinkedChart } from 'svelte-tiny-linked-charts';. - 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.