Lightweight Line Chart Component for Data Trends – Sparkline-Svelte

Sparkline-Svelte is a lightweight component for creating responsive, scalable, animated, customizable inline line charts (also called Sparkline) within Svelte applications.

Based on the popular fnando/sparkline library, the component offers significant improvements and is perfect for displaying trends and patterns in data compactly.

Features

Use Cases

• IoT Device Monitoring: Display sensor data from Internet of Things (IoT) devices, such as temperature, humidity, or battery levels. The small size of the sparklines allows for efficient display of numerous data points in a confined space. The ability to customize colors helps to indicate different sensor types or status levels.
• Real-Time Dashboards: Display live data streams, such as stock prices, server metrics, or sensor readings, in a compact and easily digestible format.
• Financial Reports: Visualize financial trends over time, such as revenue growth, expenses, or portfolio performance. You can add data labels to clearly identify the value for each data point.
• Fitness Trackers: Show progress metrics like steps taken, calories burned, or heart rate over a period. The interactive tooltips can display precise values when users hover over specific data points.
• E-commerce Analytics: Visualize sales trends, customer engagement metrics, or website traffic within an e-commerce admin panel. Integrate with various data sources to provide a quick overview of key performance indicators. Use the interactive features to allow users to explore data in more detail.

Installation

npm install sparkline-svelte

Usage

1. Create a basic sparkline with the provided data array.

<script>
    import { Sparkline } from "sparkline-svelte";
    let data = [5, 10, 15, 10, 5];
</script>
<Sparkline data={data} />

2. Create a sparkline with custom line color and interactive tooltips. When hovering over a data point, the tooltip will display the label and value in a “label: value” format.

<script>
    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 }
    ];
</script>
<Sparkline data={data} options={{ lineColor: "#27ae60", interactive: true }} />

3. This sparkline will update every second with new random data.

<script>
    import { Sparkline } from "sparkline-svelte";
    import { $state, $effect } from 'svelte/store'
    let data = $state([]);
    let interval;
    $effect(() => {
        interval = setInterval(() => {
            let value = Math.floor(Math.random() * 100); data.push(value);
            if (data.length > 10) {
                data.shift();
            }
        }, 1000);
        return () => clearInterval(interval);
    });
</script>
<Sparkline data={data} options={{ lineColor: "#e74c3c", interactive: true }} />

4. This allows you to access and display the details of the currently hovered data point.

<script>
    import { Sparkline } from "sparkline-svelte";
    import { $state } from 'svelte/store';
    let data = [5, 10, 15, 10, 5];
    let cursorData = $state(null);
</script>
<Sparkline {data} options={{ interactive: true }} bind:cursorData />
{#if cursorData}
    <p>Current Value: {cursorData.value}</p>
    <p>Index: {cursorData.index}</p>
    <p>X: {cursorData.x}</p>
    <p>Y: {cursorData.y}</p>
    {#if cursorData.label}
        <p>Label: {cursorData.label}</p>
    {/if}
{/if}

Available Props

The Sparkline component accepts several properties to control its appearance and behavior:

options Properties

The options prop accepts an object with the following properties:

cursorData Properties (DataPoint Interface)

The cursorData prop, when bound, provides access to an object with the following properties:

Related Resources

• fnando/sparkline: The original JavaScript library that inspired sparkline-svelte. It offers similar functionality for non-Svelte projects. If you work with plain JavaScript, this is a good place to start. https://github.com/fnando/sparkline

Preview