https://github.com/bn-l/sparkline-svelte
Small responsive svelte 5 chart. Ideal for dashboards etc. Fully customizable.
https://github.com/bn-l/sparkline-svelte
charting charts graph responsive svelte svelte5 svg
Last synced: about 2 months ago
JSON representation
Small responsive svelte 5 chart. Ideal for dashboards etc. Fully customizable.
- Host: GitHub
- URL: https://github.com/bn-l/sparkline-svelte
- Owner: bn-l
- License: mit
- Created: 2024-11-18T10:43:21.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-05T00:04:18.000Z (6 months ago)
- Last Synced: 2025-03-22T13:17:59.419Z (3 months ago)
- Topics: charting, charts, graph, responsive, svelte, svelte5, svg
- Language: Svelte
- Homepage: https://bn-l.github.io/sparkline-svelte/
- Size: 4.78 MB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Demo: https://bn-l.github.io/sparkline-svelte/
# Sparkline
A lightweight and customizable Sparkline component for Svelte 5, based on [fnando/sparkline](https://github.com/fnando/sparkline) (used on npm to show a chart for weekly downloads), with various improvements and updates. Works on touchscreens, [tested](./tests/Sparkline.svelte.test.ts) on all browsers.
This library creates a small responsive line chart (apparently called "sparkline" for whatever reason)--without axis labels--for quick data visualization. It is ideal for displaying trends and patterns in data in a compact form--making it good for use in dashboards, reports, etc. The SVG output scales to fit its container for responsiveness on different screen sizes.
Changes to the data prop or any option will update the SVG reactively (with svelte 5 managing the SVG dom updates). Performance should be optimal as it just atomically updates the necessary svg paths.
## Installation
Install the package via npm:
```bash
npm install sparkline-svelte
```
## Usage
### Basic Example
```svelte
import { Sparkline } from "sparkline-svelte";
```
## Props
The `Sparkline` component accepts the following props (only the **`options.lineColor`** prop
is needed to change all the colors automatically. The other options can be mostly ignored):
### `data` (required)
- **Type**: `number[] | { label: string; value: number }[]`
- **Description**: An array of numbers or objects containing `label` and `value` properties, representing the data points to plot. By supplying a `label`, you can provide any label for the values, and they will be displayed on the tooltip as `label: ${value}` when hovering over the sparkline.
### `options` (optional)
- **Type**: `Object`
- **Description**: An object to customize the appearance and behavior of the sparkline.
#### Options Properties:
- `lineColor`
- **Type**: `string`
- **Default**: `#FF476F`
- **Description**: The color of the sparkline line. Setting this will automatically adjust related colors (`fillColor`, `cursorColor`, `tooltipFillColor`, `tooltipTextColor`) based on the provided `lineColor`.
- `fillColor`
- **Type**: `string`
- **Default**: A lighter shade based on `lineColor`
- **Description**: The fill color under the sparkline.
- `cursorColor`
- **Type**: `string`
- **Default**: A contrasting color based on `lineColor`
- **Description**: The color of the cursor line when hovering over the sparkline.
- `strokeWidth`
- **Type**: `number`
- **Default**: `6`
- **Description**: The width of the sparkline line.
- `spotRadius`
- **Type**: `number`
- **Default**: `2`
- **Description**: The radius of the spots (data points) on the sparkline.
- `interactive`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Enables cursor and tooltip on hover when set to `true`.
- `showTooltip`
- **Type**: `boolean`
- **Default**: `true`
- **Description**: Shows tooltip with data point information on hover.
- `tooltipTextColor`
- **Type**: `string`
- **Default**: Based on `tooltipFillColor`
- **Description**: The text color of the tooltip.
- `tooltipFillColor`
- **Type**: `string`
- **Default**: A contrasting color based on `fillColor`
- **Description**: The background color of the tooltip.
- `tooltipFontSize`
- **Type**: `string`
- **Default**: `"0.875rem"`
- **Description**: The font size of the tooltip text.
- `cursorWidth`
- **Type**: `number`
- **Default**: `2`
- **Description**: The width of the cursor line.
- `svgClass`
- **Type**: `string`
- **Default**: `""`
- **Description**: CSS class to apply to the SVG element.
- `toolTipClass`
- **Type**: `string`
- **Default**: `"tooltip-class"`
- **Description**: CSS class to apply to the tooltip element.
### `cursorData` (optional, bindable)
- **Type**: `DataPoint | null`
- **Description**: A **bindable** prop that holds the current data point under the cursor when the sparkline is interactive. It can be used to access the data point's `x`, `y`, `value`, `index`, and `label` properties.
#### DataPoint:
```typescript
interface DataPoint {
x: number;
y: number;
value: number;
index: number;
label?: string;
}
```
You can bind to `cursorData` to get the current data point under the cursor:
```svelte
import { Sparkline } from "sparkline-svelte";
let data = [5, 10, 15, 10, 5];
let cursorData = $state(null);
{#if cursorData}
Current Value: {cursorData.value}
Index: {cursorData.index}
X: {cursorData.x}
Y: {cursorData.y}
{#if cursorData.label}
Label: {cursorData.label}
{/if}
{/if}
```
## Examples
```svelte
import { Sparkline } from "sparkline-svelte";
let data = [
{ label: "Jan", value: 10 },
{ label: "Feb", value: 15 },
{ label: "Mar", value: 12 },
{ label: "Apr", value: 20 },
{ label: "May", value: 18 }
];
```
In this example, by supplying a `label` for each data point, the tooltip will display the label and value as `label: ${value}` when hovering over the sparkline.
#### Reactive Data Updates
```svelte
import { Sparkline } from "sparkline-svelte";
let data = $state([]);
// Simulate data updates
let interval;
$effect(() => {
interval = setInterval(() => {
let value = Math.floor(Math.random() * 100);
data.push(value);
// Keep only the last 10 data points
if (data.length > 10) {
data.shift();
}
}, 1000);
return () => clearInterval(interval);
});
```
The graph will reactively update as the data prop is updated.
## License
[MIT](LICENSE)