React Sparklines Component

Common errors

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

  cause 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

  cause 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]} />`.

Warnings

• gotcha The 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.
• gotcha The `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.

Install

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

Imports

• Sparklines
  wrong:

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

  correct:

  import { Sparklines } from 'react-sparklines';

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

  import SparklinesLine from 'react-sparklines/SparklinesLine';

  correct:

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

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

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

  correct:

  import { SparklinesReferenceLine } from 'react-sparklines';

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

Quickstart

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