React Sparklines (TypeScript Rewrite)

Common errors

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

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

  cause 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';`

Warnings

• breaking This `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.
• gotcha Despite 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.
• gotcha The 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';`
• gotcha The `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}`.

Install

• npm install react-sparklines-typescript npm
• yarn add react-sparklines-typescript yarn
• pnpm add react-sparklines-typescript pnpm

Imports

• Sparklines
  wrong:

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

  correct:

  import { Sparklines } from 'react-sparklines';

  The primary container component for all sparkline visualizations. This library uses named exports.
• SparklinesLine
  wrong:

  import SparklinesLine from 'react-sparklines/SparklinesLine';

  correct:

  import { SparklinesLine } from 'react-sparklines';

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

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

  correct:

  import { SparklinesReferenceLine } from '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.

Quickstart

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;