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.
Inspired by steamcharts.com
Name | 30 day period | Value |
---|---|---|
A thing | 2,120 | |
Another thing | 2,315 | |
A third thing | 2,123 | |
An incomplete thing | 1,067 | |
A changing thing | 2,243 | |
A varying thing | 1,713 | |
A thing using lines | 2,117 |
Install using Yarn or NPM.
yarn add svelte-tiny-linked-charts
npm install --save svelte-tiny-linked-charts
If you are using Svelte 4, use version ^1.0.0. Version 2 and above is reserved for Svelte 5. The props between Svelte 4 and 5 are almost the same, but there are some breaking changes.
Include the chart in your app.
<LinkedChart {data} />
import {
LinkedChart,
LinkedLabel,
LinkedValue
} from "svelte-tiny-linked-charts"
Supply your data in a simple key:value object:
let data = {
"2005-01-01": 25,
"2005-01-02": 20,
"2005-01-03": 18,
"2005-01-04": 17,
"2005-01-05": 21
}
<LinkedChart {data} />
Or if you prefer supply the labels and values separately:
let labels = [
"2005-01-01",
"2005-01-02",
"2005-01-03",
"2005-01-04",
"2005-01-05"
]
let values = [
25,
20,
18,
17,
21
]
<LinkedChart {labels} {values} />
<LinkedChart {data} />
<LinkedChart {data} linked="link-1" />
<LinkedChart {data} linked="link-1" />
<LinkedChart {data} linked="link-1" />
<LinkedChart {data} linked="link-1" />
<LinkedChart {data} scaleMax={100} />
<LinkedChart {data} scaleMax={100} />
<LinkedChart {data} scaleMin={30} scaleMax={31} />
<LinkedChart {data} scaleMin={5000} scaleMax={5010} />
<LinkedLabel linked="link-2" />
<LinkedChart {data} linked="link-2" />
<LinkedChart {data} linked="link-2" />
<LinkedChart {data} showValue />
<LinkedChart
{data}
showValue
valueDefault="Empty label"
valuePrepend="Thing:"
valueAppend="views" />
<LinkedChart
{data}
showValue
valuePosition="floating" />
<LinkedChart {data} uid="some-id" />
<LinkedValue uid="some-id" />
The value can be transformed in order to append, prepend, or otherwise format the value. This is done using the transform prop.
<LinkedValue
uid="some-id"
transform={(value) => value.toLocaleString() + "%"} />
<LinkedChart data={...} grow />
<LinkedChart data={...} barMinWidth={2} />
<LinkedChart data={...} barMinWidth={14} />
<LinkedChart data={...} barMinHeight={0} />
<LinkedChart data={...} barMinHeight={5} />
<LinkedChart
data={...}
barMinHeight={2}
hideBarBelow={1} />
<LinkedChart
data={...}
grow
barMinWidth={0} />
<LinkedChart
data={...}
width={250}
height={100} />
svg {
width: 100%;
height: auto;
}
svg {
width: 100%;
height: 50px;
}
<LinkedChart {data} gap={10} />
<LinkedChart {data} gap={0} />
<LinkedChart {data} align="left" />
<LinkedChart fill="#ff00ff" />
<LinkedChart fill="rgb(255, 255, 0)" />
<LinkedChart fill="hsla(290, 55%, 50%, 1)" />
fill
property above.
Bars will be filled matching the index of the bar, falling back to the given fill
when not given.
For instance; In an array of [null, "red"]
, all items will use the given fill
color, except for the second bar. <LinkedChart fillArray={data.map(i => i > 40 ? "green" : "red")} />
<LinkedChart fillArray={data.map(i => `hsl(${i * 10}, 55%, 50%)`)} />
<LinkedChart {data} fadeOpacity={0.15} />
<LinkedChart {data} hover={false} />
<LinkedChart {data} transition={500} />
Instead of bars you can also opt for a line-chart using "type=line". "lineColor" can be used to color the line, "fill" to color the points. This can have all of the bar properties as well.
<LinkedChart {data} type="line" />
<LinkedChart
{data}
type="line"
lineColor="#4355db"
fill="var(--text-color)" />
tabindex=0
, allowing navigating to each data point using the keyboard. When this is passed, each bar will have a title element describing it's label and value (e.g. 2005-04-12: 76). <LinkedChart {data} tabindex="0" />
(From version 2.2.0)
Additionally, you can provide a title
and description
. Both are used to describe the chart. When the chart is interactive, you should consider explaining the interaction in the description.
<LinkedChart {data} title="Monthly things chart" />
<LinkedChart {data} description="A bar chart showing monthly things; A varying trend is shown with data points for each day." />
Providing a title and description is crucial for all users to be able to understand your chart when using tabindex=0
.
Several events are available to use the chart data on various user interactions or updates.
<LinkedChart
onhover={(options) => console.log(options)}
onblur={(options) => console.log(options)}
onvalueupdate={(options) => console.log(options)} />
This could be used to construct your own value element that can be formatted as you wish. For example in this example the values are given as cents, but the value is formatted as dollars.
<LinkedChart
onhover={({ value }) => {
const element = document.querySelector("[data-role='currency']")
element.innerHTML = (value || 0 / 100).toLocaleString("en-US", {
style: "currency", currency: "USD"
})
}}
onblur={() => document.querySelector("[data-role='currency']").innerHTML = " "} />
<span data-role="currency"></span>
In this example we format the value element inside the chart directly to make use of "toLocaleString()" to format the number. Ideally you would supply the value already formatted to avoid having to do this, but that's not always possible.
<LinkedChart
showValue
valuePosition="floating"
valuePrepend="Value: "
onvalueupdate={({ valueElement, value }) => {
if (valueElement) valueElement.innerText = (value || 0).toLocaleString()
}} />
onhover
uid, key, index, linkedKey, value, valueElement, eventElement
onblur
uid, linkedKey, valueElement, eventElement
onvalueupdate
value, uid, linkedKey, valueElement
This is a list of all configurable properties on the "LinkedChart" component.
data
{}
labels
[]
values
[]
linked
uid
height
40
width
150
barMinWidth
4
barMinHeight
0
hideBarBelow
0
grow
false
align
right
gap
1
fill
#ff3e00
fillArray
[]
fadeOpacity
0.5
hover
true
transition
0
showValue
false
valueDefault
" "
valueUndefined
0
valuePrepend
valueAppend
valuePosition
static
scaleMax
0
scaleMax
0
type
bar
lineColor
fill
preserveAspectRatio
false
tabindex
-1
title
""
description
""
onclick
() => null
onhover
() => null
onblur
() => null
onvalueupdate
() => null
This is a list of all configurable properties on the "LinkedLabel" component.
linked
empty
transform
(label) => label
This is a list of all configurable properties on the "LinkedValue" component.
uid
empty
valueUndefined
0
transform
(value) => value