{"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.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-sparklines"],"cli":null},"imports":["import { Sparklines } from 'react-sparklines';","import { Sparklines, SparklinesLine } from 'react-sparklines';","import { SparklinesReferenceLine } from 'react-sparklines';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}