Registry / web-framework / react-sparklines

react-sparklines

library1.7.0jsnpmunverified

react-sparklines is a lightweight React component library designed for rendering small, expressive sparkline charts using SVG. It offers a declarative API to create various types of micro-charts, including lines, bars, and spots, along with statistical overlays like reference lines for mean, median, and normal bands. The current stable version is 1.7.0, with its last publication dating back several years, suggesting the library is in a maintenance phase rather than active development. Its primary appeal lies in providing simple, customizable visualizations for dashboards or other data-dense user interfaces where the emphasis is on quickly conveying trends without the complexity and overhead of full-featured charting libraries. It distinguishes itself by focusing purely on compact, trend-oriented data representations.

web-framework

npm install react-sparklines

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-SPARKLINES

react-sparklines

web-frameworkjavascriptv1.7.0

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 'react-sparklines';

✗ import Sparklines from 'react-sparklines'; const { Sparklines } = require('react-sparklines');

Sparklines is a named export, not a default export, and should be destructured from the package.

SparklinesLine

✓ import { Sparklines, SparklinesLine } from 'react-sparklines';

✗ import SparklinesLine from 'react-sparklines/SparklinesLine';

All sub-components like SparklinesLine, SparklinesBars, etc., are named exports from the main package.

SparklinesReferenceLine

✓ import { SparklinesReferenceLine } from 'react-sparklines';

✗ const SparklinesReferenceLine = require('react-sparklines').SparklinesReferenceLine;

While CommonJS might work, modern React applications typically use ES Modules for imports.

Demonstrates a basic line sparkline and a more complex one with spots and a mean reference line.

import React from 'react'; import ReactDOM from 'react-dom'; import { Sparklines, SparklinesLine, SparklinesSpots, SparklinesReferenceLine } from 'react-sparklines'; const sampleData = [5, 10, 5, 20, 8, 15, 25, 12, 18, 7, 30, 22]; function App() { return ( <div> <h2>Basic Sparkline</h2> <Sparklines data={[5, 10, 5, 20]} width={100} height={20} margin={5}> <SparklinesLine color="blue" /> </Sparklines> <h2>Sparkline with Spots and Reference Line</h2> <Sparklines data={sampleData} width={120} height={30} margin={5}> <SparklinesLine style={{ fill: 'none', strokeWidth: 2 }} /> <SparklinesSpots size={2} style={{ fill: '#ff7f0e' }} /> <SparklinesReferenceLine type="mean" style={{ stroke: 'red', strokeDasharray: '2,2' }} /> </Sparklines> </div> ); } ReactDOM.render(<App />, document.getElementById('root'));

Debug

Known issues

gotchaThe package react-sparklines has not been updated in several years (last published 7 years ago for v1.7.0). This may lead to compatibility issues with newer versions of React (e.g., hooks, concurrent mode, strict mode) or modern development toolchains. It also implies a lack of ongoing security updates or feature enhancements.

fix

Thoroughly test with your specific React version and environment. For new projects or those requiring active maintenance and modern React features, consider more actively developed alternatives like recharts, nivo, or custom SVG solutions.

affects: >=1.0.0

gotchaThe `width` and `height` props define the SVG viewbox dimensions, not necessarily the rendered size. By default, the component is responsive and will scale to fit its parent container. To set absolute pixel dimensions, `svgWidth` and `svgHeight` should be used instead.

fix

If you need a fixed size, use `svgWidth={100} svgHeight={20}` instead of `width={100} height={20}`. For responsive behavior, ensure the parent container has defined dimensions.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Objects are not valid as a React child (found: object with keys {x, y, value}). If you meant to render a collection of children, use an array instead.

The `data` prop for Sparklines expects an array of numbers, not an array of objects or an object.

fix

Ensure the `data` prop is an array of primitive number values, e.g., `data={[1, 2, 3, 4]}`.

TypeError: Cannot read properties of undefined (reading 'map') or 'map' is not a function

The `data` prop was either not provided or was provided with a non-array value (e.g., `null`, `undefined`, or an object).

fix

Always provide an array of numbers to the `data` prop of the `Sparklines` component, e.g., `<Sparklines data={[10, 20, 15]} />`.

Upgrade

Version history

1.7.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for rendering React components.

react-domrequiredPeer dependency for DOM rendering in React applications.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/borisyankov/react-sparklines ↗

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

homepagehttp://borisyankov.github.io/react-sparklines/ ↗