https://github.com/graphieros/tiny-spark
An elegant, reactive and responsive sparkline chart solution without dependency.
https://github.com/graphieros/tiny-spark
chart sparkline universal
Last synced: 11 months ago
JSON representation
An elegant, reactive and responsive sparkline chart solution without dependency.
- Host: GitHub
- URL: https://github.com/graphieros/tiny-spark
- Owner: graphieros
- License: mit
- Created: 2025-03-25T07:36:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-01T18:31:59.000Z (12 months ago)
- Last Synced: 2025-08-02T10:14:21.716Z (11 months ago)
- Topics: chart, sparkline, universal
- Language: TypeScript
- Homepage: https://tiny-spark.graphieros.com/
- Size: 185 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# tiny-spark
[](https://github.com/graphieros/tiny-spark)
[](https://github.com/graphieros/tiny-spark/issues)
[](https://github.com/graphieros/tiny-spark?tab=MIT-1-ov-file#readme)
[](https://github.com/graphieros/tiny-spark)
An elegant, reactive and responsive sparkline chart solution without dependency.
[DEMO](https://tiny-spark.graphieros.com/)
## Installation
```
npm i tiny-spark
```
## Usage
Import the file in your project:
```js
import { render } from "tiny-spark";
// If you need to fetch data, call render afterwards
getData().then(render);
// If you hardcode your dataset, you can call render immediately
```
Calling render again will re-trigger the animation (if data-animation is set to "true").
Just set up a div with a "tiny-spark" class, with a few data attributes to configure the chart.
Note that providing data-id is optional, a unique id will be generated if you don't.
Render a line chart:
```html
```
Render a bar chart:
```html
```
## Styling
tiny-spark is headless.
Target the following css classes to customize elements:
```css
/** the chart container (div element) */
.tiny-spark {
}
/** the tooltip (div element) */
.tiny-spark-tooltip {
/** just display:none if you don't need it */
}
/** the indicator (svg line element) */
.tiny-spark-indicator {
/** for example: customize stroke-dasharray */
}
/** the plots (svg circle element) */
.tiny-spark-datapoint-circle {
}
/** the chart line (svg path element) */
.tiny-spark-line-path {
}
/** the chart area (svg path element) */
.tiny-spark-line-area {
}
```