Registry / serialization / react-sparklines-typescript

react-sparklines-typescript

library1.3.0jsnpmunverified

The `react-sparklines` package (maintained by acodesmith) is a modern, TypeScript-rewritten version of the original unmaintained `react-sparklines` library. It provides a suite of React components for rendering small, expressive sparklines, including various visual elements like lines, bars, spots, reference lines, and normal bands. As of version 1.3.0, this fork actively uses modern React patterns such as functional components, and ships with comprehensive TypeScript types, offering a smaller, faster, and more actively maintained alternative to its predecessor. Its key differentiators include explicit TypeScript support, adherence to contemporary React development practices, and a focus on performance and bundle size. The release cadence is driven by ongoing modernization and bug fixes, providing a stable, up-to-date solution for compact data visualization in React applications.

serialization web-framework

npm install react-sparklines-typescript

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SPARKLINES-T

react-sparklines-typescript

serializationjavascriptv1.3.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';

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

The primary container component for all sparkline visualizations. This library uses named exports.

SparklinesLine

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

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

Component to draw a line graph within the Sparklines container. All sub-components are named exports from the main package.

SparklinesReferenceLine

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

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

Component to add horizontal reference lines (e.g., mean, median, average). Avoid CommonJS `require()` as the library is ESM-first.

SparklinesBars

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

Component to draw bar charts within the Sparklines container.

Demonstrates how to render a basic sparkline with a line, spots, and a mean reference line using sample data, styled for clarity within a React functional component.

import React from 'react'; import { Sparklines, SparklinesLine, SparklinesSpots, SparklinesReferenceLine } from 'react-sparklines'; // A simple functional component demonstrating sparklines const MySparklineChart: React.FC = () => { const sampleData = [5, 10, 5, 20, 8, 15, 12, 18, 7, 13, 10, 22]; const meanValue = sampleData.reduce((a, b) => a + b, 0) / sampleData.length; return ( <div style={{ width: '200px', height: '50px', border: '1px solid #ccc', padding: '10px', margin: '20px' }}> <h3 style={{ fontSize: '1em', marginBottom: '5px' }}>Sales Trend</h3> <Sparklines data={sampleData} width={180} height={40} margin={5}> <SparklinesLine color="#1a73e8" style={{ fill: 'none', strokeWidth: 2 }} /> <SparklinesSpots style={{ fill: '#1a73e8' }} size={2} /> <SparklinesReferenceLine type="mean" style={{ stroke: 'red', strokeDasharray: '2, 2' }} /> </Sparklines> <p style={{ fontSize: '0.8em', color: '#555', marginTop: '5px' }}>Mean: {meanValue.toFixed(2)}</p> </div> ); }; export default MySparklineChart;

Debug

Known issues

breakingThis `react-sparklines` package (version 1.3.0 and above, maintained by `acodesmith`) is a complete rewrite in TypeScript using modern React functional components. If you are migrating from the older `borisyankov/react-sparklines` package, expect significant API changes and ensure your codebase is compatible with modern React patterns.

fix

Review the updated API in the README and refactor any class-based components to functional components using hooks if necessary. Ensure your React version is 16.8 or newer.

affects: >=1.3.0

gotchaDespite the internal or conceptual name `react-sparklines-typescript`, this library is published on npm under the name `react-sparklines`. To ensure you install this modern, TypeScript-rewritten version, install `react-sparklines` and verify the maintainer (`acodesmith`) to distinguish it from the older, unmaintained package with the same name.

fix

Always install using `npm install react-sparklines` or `yarn add react-sparklines` and confirm the package's `package.json` points to the `acodesmith` repository.

affects: >=1.3.0

gotchaThe library is designed for ESM (ECMAScript Modules) and modern JavaScript environments with bundlers like Webpack or Vite. While CommonJS `require()` might be polyfilled in some setups, it is not the recommended or officially supported way to import components, and may lead to issues with tree-shaking, type inference, or bundle size.

fix

Always use ES Module import syntax: `import { Component } from 'react-sparklines';`

affects: >=1.3.0

gotchaThe `width` and `height` props for the `Sparklines` container define the SVG viewbox dimensions, and the component will automatically scale responsively within its parent container by default. If you desire absolute pixel dimensions, you must use `svgWidth` and `svgHeight` props instead.

fix

For responsive behavior, use `width` and `height`. For fixed pixel dimensions, use `svgWidth={100} svgHeight={20}`.

affects: >=1.3.0

Errors

Common errors & fixes

TypeError: (0 , react_sparklines__WEBPACK_IMPORTED_MODULE_2__.Sparklines) is not a function

This error typically indicates that a named export (like `Sparklines`) is being incorrectly imported, often by attempting a default import or a faulty CommonJS `require()` pattern in a module-aware environment.

fix

Ensure you are using named imports correctly: `import { Sparklines, SparklinesLine } from 'react-sparklines';`

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

This issue often arises when React components are not correctly imported or are used in a React version that does not support the component's underlying implementation (e.g., trying to use functional components with an ancient React setup), or if there's a module resolution problem.

fix

Verify that `react` and `react-dom` are installed as peer dependencies and that your project uses a modern React version (16.8 or newer). Double-check that your import paths are correct and that the component names are spelled exactly as exported: `import { Sparklines } from 'react-sparklines';`

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for rendering React components.

react-domrequiredPeer dependency required for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/acodesmith/react-sparklines-typescript ↗

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