Registry / web-framework / vue-sparklines

vue-sparklines

library2.0.3jsnpmunverified

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.

web-framework

npm install vue-sparklines

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-SPARKLINES

vue-sparklines

web-frameworkjavascriptv2.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Sparklines

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

✗ const Sparklines = require('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.

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');

Debug

Known issues

gotchaThe `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.

affects: >=2.0.3

gotchaWhile 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.

affects: >=2.0.3

Errors

Common errors & fixes

Failed to resolve component: sparklines

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')

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.

Upgrade

Version history

2.0.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Zen33/vue-sparklines ↗

packagehttps://www.npmjs.com/package/vue-sparklines ↗

homepagehttp://7te.net ↗