{"id":15218,"library":"react-sparklines","title":"React Sparklines Component","description":"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.","status":"maintenance","version":"1.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/borisyankov/react-sparklines","tags":["javascript","react","component","react-component","charts","sparklines","visualization","jsx"],"install":[{"cmd":"npm install react-sparklines","lang":"bash","label":"npm"},{"cmd":"yarn add react-sparklines","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-sparklines","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency for DOM rendering in React applications.","package":"react-dom","optional":false}],"imports":[{"note":"Sparklines is a named export, not a default export, and should be destructured from the package.","wrong":"import Sparklines from 'react-sparklines';\nconst { Sparklines } = require('react-sparklines');","symbol":"Sparklines","correct":"import { Sparklines } from 'react-sparklines';"},{"note":"All sub-components like SparklinesLine, SparklinesBars, etc., are named exports from the main package.","wrong":"import SparklinesLine from 'react-sparklines/SparklinesLine';","symbol":"SparklinesLine","correct":"import { Sparklines, SparklinesLine } from 'react-sparklines';"},{"note":"While CommonJS might work, modern React applications typically use ES Modules for imports.","wrong":"const SparklinesReferenceLine = require('react-sparklines').SparklinesReferenceLine;","symbol":"SparklinesReferenceLine","correct":"import { SparklinesReferenceLine } from 'react-sparklines';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Sparklines, SparklinesLine, SparklinesSpots, SparklinesReferenceLine } from 'react-sparklines';\n\nconst sampleData = [5, 10, 5, 20, 8, 15, 25, 12, 18, 7, 30, 22];\n\nfunction App() {\n  return (\n    <div>\n      <h2>Basic Sparkline</h2>\n      <Sparklines data={[5, 10, 5, 20]} width={100} height={20} margin={5}>\n        <SparklinesLine color=\"blue\" />\n      </Sparklines>\n\n      <h2>Sparkline with Spots and Reference Line</h2>\n      <Sparklines data={sampleData} width={120} height={30} margin={5}>\n        <SparklinesLine style={{ fill: 'none', strokeWidth: 2 }} />\n        <SparklinesSpots size={2} style={{ fill: '#ff7f0e' }} />\n        <SparklinesReferenceLine type=\"mean\" style={{ stroke: 'red', strokeDasharray: '2,2' }} />\n      </Sparklines>\n    </div>\n  );\n}\n\nReactDOM.render(<App />, document.getElementById('root'));","lang":"javascript","description":"Demonstrates a basic line sparkline and a more complex one with spots and a mean reference line."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure the `data` prop is an array of primitive number values, e.g., `data={[1, 2, 3, 4]}`.","cause":"The `data` prop for Sparklines expects an array of numbers, not an array of objects or an object.","error":"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."},{"fix":"Always provide an array of numbers to the `data` prop of the `Sparklines` component, e.g., `<Sparklines data={[10, 20, 15]} />`.","cause":"The `data` prop was either not provided or was provided with a non-array value (e.g., `null`, `undefined`, or an object).","error":"TypeError: Cannot read properties of undefined (reading 'map') or 'map' is not a function"}],"ecosystem":"npm"}