https://github.com/react-sandbox/sparkline
📈 Sparkline chart
https://github.com/react-sandbox/sparkline
chart component react react-sparkline sparkline svg typescript
Last synced: 3 months ago
JSON representation
📈 Sparkline chart
- Host: GitHub
- URL: https://github.com/react-sandbox/sparkline
- Owner: react-sandbox
- License: mit
- Created: 2023-06-15T16:18:42.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-15T22:07:10.000Z (over 1 year ago)
- Last Synced: 2025-02-10T01:07:59.127Z (3 months ago)
- Topics: chart, component, react, react-sparkline, sparkline, svg, typescript
- Language: TypeScript
- Homepage:
- Size: 109 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@react-sandbox/sparkline
📈 Sparkline SVG component.
## Usage
### Install
Install the `@react-sandbox/sparkline` package:
```
npm install @react-sandbox/sparkline
```
### Import
Import the `Sparkline` component:
```tsx
import React from 'react'
import Sparkline from '@react-sandbox/sparkline'
function App() {
return (
)
}
```
### Props
| Prop | Type | Default | Description |
| ------------- | --------------------- | ------------ | ---------------------- |
| `values` | `Array` | **required** | Y-coordinates on graph |
| `width` | `number` | **required** | Sparkline width |
| `height` | `number` | **required** | Sparkline height |
| `lineColor` | `string` | `'#4989eb'` | Line stroke color |
| `lineWidth` | `number` | `3` | Line stroke width |
| `fillColor` | `string` | `'#b2cff2'` | Fill area color |
| `fillOpacity` | `number` | `1` | Fill area opacity |
| `className` | `string` | `-` | CSS classes |
| `style` | `React.CSSProperties` | `-` | CSS styles |
## Development
### Local
```
pnpm install
pnpm dev
```
### Tests
```
pnpm test
```
### Example
Inside `test/`:
```
pnpm install
pnpm dev
```
## License
MIT