https://github.com/mitcheljager/svelte-tiny-linked-charts
Svelte Tiny Linked Charts
https://github.com/mitcheljager/svelte-tiny-linked-charts
Last synced: 2 months ago
JSON representation
Svelte Tiny Linked Charts
- Host: GitHub
- URL: https://github.com/mitcheljager/svelte-tiny-linked-charts
- Owner: Mitcheljager
- License: unlicense
- Created: 2021-08-16T01:01:55.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-02-07T22:20:30.000Z (4 months ago)
- Last Synced: 2025-04-04T04:39:00.797Z (2 months ago)
- Language: Svelte
- Homepage: https://mitcheljager.github.io/svelte-tiny-linked-charts/
- Size: 1.06 MB
- Stars: 93
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tiny Linked Charts for Svelte
[](https://github.com/Mitcheljager/svelte-tiny-linked-charts/actions/workflows/node.js.yml)
[](https://www.npmjs.com/package/svelte-tiny-linked-charts)
[](https://www.npmjs.com/package/svelte-tiny-linked-charts)
[](https://madewithsvelte.com/p/tiny-linked-charts/shield-link)
[](https://bundlephobia.com/package/svelte-tiny-linked-charts)
This is a library to display tiny bar charts. These charts are more so meant for graphic aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.
**Demo and Docs**: https://mitcheljager.github.io/svelte-tiny-linked-charts/
### Installation
Install using Yarn or NPM.
```js
yarn add svelte-tiny-linked-charts --dev
```
```js
npm install svelte-tiny-linked-charts --save-dev
```
If you are using Svelte 4, use version ^1.0.0. Version 2 is reserved for Svelte 5.
Include the chart in your app.
```js
import { LinkedChart, LinkedLabel, LinkedValue } from "svelte-tiny-linked-charts"
```
```svelte
```
Supply your data in a simple key:value object:
```js
let data = {
"2005-01-01": 25,
"2005-01-02": 20,
"2005-01-03": 18,
"2005-01-04": 17,
"2005-01-05": 21
}
```
```svelte
```
Or if you prefer supply the labels and values separately:
```js
let labels = [
"2005-01-01",
"2005-01-02",
"2005-01-03",
"2005-01-04",
"2005-01-05"
]
let values = [
25,
20,
18,
17,
21
]
```
```svelte
```
## Usage
For detailed documentation on every property check out: [https://mitcheljager.github.io/svelte-tiny-linked-charts/](https://mitcheljager.github.io/svelte-tiny-linked-charts/)
### Configuration
`` component.
| Property | Default | Description |
---|---|---
data | {} | Data that will be displayed in the chart supplied in key:value object.
labels | [] | Labels supplied separately, to be used together with "values" property.
values | [] | Values supplied separately, to be used together with "labels" property.
linked| | Key to link this chart to other charts with the same key.
uid | | Unique ID to link this chart to a LinkedValue component with the same uid.
height | 40 | Height of the chart in pixels.
width | 150 | Width of the chart in pixels.
barMinWidth | 4 | Width of the bars in the chart in pixels.
barMinHeight | 0 | Minimum height of the bars in the chart in pixels.
hideBarBelow | 0 | Bars below this value will be hidden, showing as 0 height.
grow | false | Whether or not the bar should grow to fill out the full width of the chart.
align | right | The side the bars should align to when they do not completely fill out the chart.
gap | 1 | Gap between the bars in pixels.
fill | #ff3e00 | Color of the bars, can be any valid CSS color.
fillArray | [] | Array of colors for each individual bar.
fadeOpacity | 0.5 | The opacity the faded out bars should display in.
hover | true | Boolean whether or not this chart can be hovered at all.
transition | 0 | Transition the chart between different stats. Value is time in milliseconds.
showValue | false | Boolean whether or not a value will be shown.
valueDefault | "\ " | Default value when not hovering.
valueUndefined | 0 | For when the hovering value returns undefined.
valuePrepend | | String to prepend the value.
valueAppend | | String to append to the value.
valuePosition | static | Can be set to "floating" to follow the position of the hover.
scaleMax | 0 | Use this to overwrite the automatic scale set to the highest value in your array.
scaleMax | 0 | Use this to overwrite the default value floor of 0.
type | bar | Can be set to "line" to display a line chart instead.
lineColor | fill | Color of the line if used with type="line".
preserveAspectRatio | false | Sets whether or not the SVG will preserve it's aspect ratio.
tabindex | -1 | Sets the tabindex of each bar. When a tabindex of 0 is given, each bar will contain a title that describes the bar's label and value.
title | "" | Title that describes the chart for screen readers.
description | "" | Description that describes the chart for screen readers.
onclick | null | Function that executes on click and returns the key and index for the clicked data.
onhover | null | Function that executes on hover of each bar.
onblur | null | Function that executes when focus leaves the chart.
`` component.
Property | Default | Description
--- | --- | ---
linked | | Key to link this label to charts with the same key.
empty | \ | String that will be displayed when no bar is being hovered.
transform | (label) => label | Transform the given label to format it differently from how it was supplied.
`` component.
Property | Default | Description
--- | --- | ---
uid | | Unique ID to link this value to a chart with the same uid.
empty | \ | String that will be displayed when no bar is being hovered.
valueUndefined | 0 | For when the hovering value returns undefined.
transform | (value) => value | Transform the given value to format it differently from how it was supplied.