Vue Sparklines

2.0.3 · maintenance · verified Wed Apr 22

Vue Sparklines is a lightweight, TypeScript-based library providing various sparkline charts for Vue 3 applications. It offers line, curve, bar, pie, dynamic, and gradient charts, along with features like tooltips and reference lines. A key differentiator is its explicit claim of having 'no other dependencies', making it a self-contained solution for simple data visualizations. The current stable version is 2.0.3. However, it's important to note that the package was last published four years ago, suggesting a maintenance-only status rather than active development. Developers should consider this when evaluating its long-term compatibility with future Vue ecosystem changes or for projects requiring frequent updates and support.

Common errors

```
Failed to resolve component: sparklines
```
cause The Sparklines component was not correctly registered or imported in the Vue application context.

fix Ensure you have imported `{ Sparklines } from 'vue-sparklines'` and added `Sparklines` to the `components` option of your Vue component (or globally registered it).
```
TypeError: Cannot read properties of undefined (reading 'length')
```
cause The `data` prop passed to the Sparklines component is `undefined` or not an array, causing internal rendering logic to fail.

fix Always ensure the `data` prop provided to the `Sparklines` component is an array, even if empty, e.g., `:data="[]"` or `data: []` in your component's data.

Warnings

gotcha The `vue-sparklines` package (v2.0.3) was last published over four years ago. This indicates a lack of active development and maintenance, which may lead to compatibility issues with newer versions of Vue, TypeScript, or modern build tools. Users might encounter unaddressed bugs or difficulties integrating with evolving front-end ecosystems.
Fix: Thoroughly test the library in your target environment. Consider forking the repository and maintaining it yourself, or explore more actively maintained alternatives if long-term support and up-to-date compatibility are critical for your project.
gotcha While the library boasts 'no other dependencies,' this means it won't automatically benefit from performance optimizations or bug fixes in popular charting or utility libraries. Features like advanced interactivity, complex data transformations, or specific accessibility requirements might need custom implementation or integration with other tools.
Fix: Be prepared to implement advanced features manually. Evaluate if the simplicity and small footprint outweigh the potential need for custom development or integration work for specific use cases.

Install

npm install vue-sparklines npm
yarn add vue-sparklines yarn
pnpm add vue-sparklines pnpm

Imports

Sparklines
wrong:
```
const Sparklines = require('vue-sparklines');
```
correct:
```
import { Sparklines } from 'vue-sparklines';
```
The primary component is a named export. ESM-only since it's built for Vue 3.
App
```
import App from './App.vue';
```
Standard Vue application component import pattern, often used with this library.

Quickstart

This example demonstrates how to integrate `vue-sparklines` into a Vue 3 application, showcasing line, bar, and curve charts with sample data for dashboard metrics.

import { createApp } from 'vue';
import { Sparklines } from 'vue-sparklines';

const App = {
  template: `
    <div id="app" style="font-family: Arial, sans-serif; padding: 20px;">
      <h1>Dashboard Metrics</h1>
      <div style="display: flex; gap: 20px; flex-wrap: wrap;">
        <div style="border: 1px solid #eee; padding: 15px; border-radius: 8px; flex: 1; min-width: 250px;">
          <h2>Daily Sales</h2>
          <p>Last 7 days: <strong>{{ totalSales }} units</strong></p>
          <Sparklines :data="salesData" type="line" :height="50" :width="200" color="#4CAF50" :line-width="2" />
        </div>

        <div style="border: 1px solid #eee; padding: 15px; border-radius: 8px; flex: 1; min-width: 250px;">
          <h2>Website Visitors</h2>
          <p>Hourly: <strong>{{ totalVisitors }} unique</strong></p>
          <Sparklines :data="visitorData" type="bar" :height="50" :width="200" color="#2196F3" :bar-width="4" />
        </div>

        <div style="border: 1px solid #eee; padding: 15px; border-radius: 8px; flex: 1; min-width: 250px;">
          <h2>Server Load</h2>
          <p>Past hour: <strong>{{ currentLoad.toFixed(1) }}% average</strong></p>
          <Sparklines :data="loadData" type="curve" :height="50" :width="200" color="#FFC107" :line-width="2" />
        </div>
      </div>
    </div>
  `,
  components: {
    Sparklines,
  },
  data() {
    return {
      salesData: [12, 18, 25, 20, 30, 22, 35],
      visitorData: [50, 60, 45, 70, 55, 65, 80, 75],
      loadData: [0.1, 0.3, 0.5, 0.8, 0.7, 0.6, 0.4, 0.2, 0.15, 0.25, 0.45, 0.65]
    };
  },
  computed: {
    totalSales() {
      return this.salesData.reduce((sum: number, val: number) => sum + val, 0);
    },
    totalVisitors() {
      return this.visitorData.reduce((sum: number, val: number) => sum + val, 0);
    },
    currentLoad() {
      return this.loadData.length > 0 ? this.loadData[this.loadData.length - 1] * 100 : 0;
    }
  }
};

createApp(App).mount('#app');

view raw JSON →