https://github.com/amoradi/scintilla
React sparklines 📈
https://github.com/amoradi/scintilla
line-charts plot react react-sparklines react-sparklines-component scintilla svg
Last synced: 3 months ago
JSON representation
React sparklines 📈
- Host: GitHub
- URL: https://github.com/amoradi/scintilla
- Owner: amoradi
- Created: 2019-09-23T03:42:07.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:21:27.000Z (almost 3 years ago)
- Last Synced: 2025-07-11T21:32:06.745Z (3 months ago)
- Topics: line-charts, plot, react, react-sparklines, react-sparklines-component, scintilla, svg
- Language: TypeScript
- Homepage: https://amoradi.github.io/scintilla
- Size: 7.23 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# scintilla → react sparklines
[](https://github.com/amoradi/scintilla/actions/workflows/node.js.yml)
---
## Demo
See: https://amoradi.github.io/scintilla
Donate:
- BTC: `bc1qejny2ddag2phmyndq78hq2uxuxkh38t5v4k9mt`
- ETH: `0x16cC9a598a3817F32c5B794C9391B14Ff93bd87e`
## Install
```bash
$ yarn add scintilla
$ or
$ npm install scintilla --save
```
## Quick Start
```jsx
import React from "react";
import { Frame, Line } from "scintilla";
const RedLine = () => (
{/* wrap sparkline in a container to constrain width */}
);
```
## Features
- composeable: mix and match as many `Line`'s within a single `Frame`
- `SVG`-based
- flexible intra-data color options
- fluid width. Wrap `Frame` in your own container to constrain width.
## API
See: https://amoradi.github.io/scintilla/documentation
**Types**
```ts
type Color = {
gradient?: RGBA | RGBA[];
solid?: RGBA | RGBA[];
};
```
```ts
type RGBA = [0-255, 0-255, 0-255, 0-1]
```
```ts
type Stroke = {
width: number;
style: "dash" | "solid";
color: Color;
};
```
**Components**
### ``
Responsive container for all `data`-needy child components. Wrap `Frame` in your own container to constrain width.
- **`height?: number`**
Optionally specify height in pixels. Defaults to `50px`.
- **`yRange?: [min, max]`**
Optionally plot `children` components with this y axis constraint.
**Example**
```jsx
```
---
### ``
Plot your series data as a line. Style line with `stroke`, `fill` or both.
- **`data: number[]`**
The list of `y` data to plot.
- **`stroke?: Stroke`**
Set `width` in pixels, `style` as `'dash'` or `'solid'` and color option.
- **`fill?: Color`**
Solid or gradient fill, with one or many colors. Fills area from data line to bottom axis.
**Example**
```jsx
```
---
### ``
Circular marker positioned at `data[index]`. Make as many as you like.
- **`data: number[]`**
The list of `y` data `Marker` will render from.
- **`color?: RGBA`**
The rgba fill color. Defaults to red.
- **`index?: number`**
position marker at `data[index]`. If ommited, defaults to last index.
- **`size?: number<1-10>`**
Diameter of `Marker` circle in pixels. Defaults to `4px`.
**Example**
```jsx
{/* 2 red markers, at 5th and last index */}
```
## Examples
See: https://amoradi.github.io/scintilla
## License
MIT