https://github.com/quisido/react-sparkline-svg

A React Component that renders a sparkline as an SVG.
https://github.com/quisido/react-sparkline-svg

graph graphs javascript jsx npm npm-package npmjs react reactjs sparkline sparkline-graphs sparklines

Last synced: 3 months ago
JSON representation

A React Component that renders a sparkline as an SVG.

• Host: GitHub
• URL: https://github.com/quisido/react-sparkline-svg
• Owner: quisido
• License: mit
• Created: 2019-06-06T03:59:22.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-06-27T00:45:41.000Z (7 months ago)
• Last Synced: 2024-09-28T15:21:05.666Z (4 months ago)
• Topics: graph, graphs, javascript, jsx, npm, npm-package, npmjs, react, reactjs, sparkline, sparkline-graphs, sparklines
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-sparkline-svg
• Size: 1.01 MB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Sparkline SVG  [![version](https://img.shields.io/npm/v/react-sparkline-svg.svg)](https://www.npmjs.com/package/react-sparkline-svg) [![minzipped size](https://img.shields.io/bundlephobia/minzip/react-sparkline-svg.svg)](https://www.npmjs.com/package/react-sparkline-svg) [![downloads](https://img.shields.io/npm/dt/react-sparkline-svg.svg)](https://www.npmjs.com/package/react-sparkline-svg)

A React Component that renders a sparkline as an SVG

## Install

* `npm install react-sparkline-svg` or

* `yarn add react-sparkline-svg`

## Use

```js

import Sparkline from 'react-sparkline-svg';

function App() {

  return ;

}

```

## Props

### decimals

_Optional_ number

Sets the number of decimal places used to generate the sparkline. A larger

number of decimal places will result in better precision, but more memory.

_Default: 4_

### desc

_Optional_ string

Sets the description of the sparkline. Used to populate the `` element.

_Default: 'A line graph representation of a value\'s change over time.'

### fill

_Optional_ string

Sets the color of the area underneath the sparkline.

_Default: 'transparent'_

### height

_Optional_ number

Sets the height of the sparkline's SVG element. Not to be confused with

`viewBoxHeight`.

_Default: '100%'_

### preserveAspectRatio

_Optional_ string

Sets the `preserveAspectRatio` attribute of the SVG element.

_Default: 'none'_

### stroke

_Optional_ string

Sets the color of the sparkline itself.

_Default: 'currentColor'_

### strokeWidth

_Optional_ number or string

Sets the width of the sparkline itself. If using a number, this will be

relative to the view box height and width.

_Default: '1%'_

### title

_Optional_ string

Sets the title of the sparkline SVG by populating the  element. This

is useful for accessibility purposes and often appears as a tooltip, similar

to the title attribute on an anchor tag.

_Default: 'Sparkline'_

### values

_Required_ array of numbers

Sets the values used to generate the sparkline.

### viewBoxHeight

_Optional_ number

Sets the height of the sparkline's view box. Not to be confused with

`height`. The sparkline will always stretch to fit the view box.

_Default: 100_

### viewBoxWidth

_Optional_ number

Sets the width of the sparkline's view box. Not to be confused with `width`.

The sparkline will always stretch to fit the view box.

_Default: 100_

### width

_Optional_ string

Sets the width of the sparkline's SVG element. Not to be confused with

`viewBoxWidth`.

_Default: '100%'_