Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mitjafelicijan/sparklines
Simple SVG Sparklines
https://github.com/mitjafelicijan/sparklines
chart js sparkline svg
Last synced: about 1 month ago
JSON representation
Simple SVG Sparklines
- Host: GitHub
- URL: https://github.com/mitjafelicijan/sparklines
- Owner: mitjafelicijan
- License: bsd-2-clause
- Created: 2023-12-01T16:58:30.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-09T06:00:08.000Z (about 1 year ago)
- Last Synced: 2023-12-10T02:25:00.663Z (about 1 year ago)
- Topics: chart, js, sparkline, svg
- Language: JavaScript
- Homepage: https://mitjafelicijan.github.io/sparklines/
- Size: 69.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple SVG Sparklines
Self-contained tiny SVG sparkline chart library written in vanilla JS with zero dependencies.
Add `sparklines.js` to your HTML file and use proper data attributes and that is about it.
Check kitchensink demo on https://mitjafelicijan.github.io/sparklines/.
## Basic usage
```html
```
Check `kitchensink.html` for more examples.
> To create minified version of `sparklines.js` use `npx minify sparklines.js > sparklines.min.js`.
You can also use CDN for this library so that you don't need to host it
yourself:
- https://cdn.jsdelivr.net/gh/mitjafelicijan/sparklines/sparklines.js
- https://cdn.jsdelivr.net/gh/mitjafelicijan/sparklines/sparklines.min.js
## Bar charts
| Attribute | Description | Default Value |
|-----------|-------------|---------------|
| data-sparkline | If sparkline is enabled on this element | None |
| data-points | List of numbers / data | [] |
| data-width | Width of the container in px | 100 |
| data-height | Height of the container in px | 30 |
| data-gap | Gap between the bars in px | 5 |
| data-colors | List of colors of the bars in HEX or color name | gray |
```html
```
## Line charts
| Attribute | Description | Default Value |
|-----------|-------------|---------------|
| data-sparkline | If sparkline is enabled on this element | None |
| data-points | List of numbers / data | [] |
| data-width | Width of the container in px | 100 |
| data-height | Height of the container in px | 30 |
| data-stroke-width | Size of the line in px | 2 |
| data-colors | Color of the line in HEX or color name | gray |
```html
```
## Pie charts
| Attribute | Description | Default Value |
|-----------|-------------|---------------|
| data-sparkline | If sparkline is enabled on this element | None |
| data-points | List of numbers / data | [] |
| data-width | Width of the container in px | 100 |
| data-height | Height of the container in px | 30 |
| data-colors | List of colors of the slices in HEX or color name | gray |
```html
```
## Stacked charts
| Attribute | Description | Default Value |
|-----------|-------------|---------------|
| data-sparkline | If sparkline is enabled on this element | None |
| data-points | List of numbers / data | [] |
| data-width | Width of the container in px | 100 |
| data-height | Height of the container in px | 30 |
| data-gap | Gap between the bars in px | 5 |
| data-colors | List of colors of the bars in HEX or color name | gray |
```html
```
## Programmatic update
Each initialized sparkline chart is also listening to a custom event called
`update` that triggers re-rendering of the chart.
Let's assume we have a basic chart like this.
```html
```
Then we can update `data-points` attribute and emit update event.
```js
const chart = document.getElementById('chart1');
chart.dataset.points = '6,44,21,95,11';
chart.dispatchEvent(new Event('update'));
```
You can also change colors or any `data-*` attribute. There are no restrictions.
## Notes
- `transparent` is a valid option for `data-colors` attribute.
- If not enough colors are provided the library will cycle through available
ones until all datapoints are used.
## Additional reading material
- https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction
- https://www.w3schools.com/graphics/svg_intro.asp
- https://tutorial.math.lamar.edu/pdf/Trig_Cheat_Sheet_Reduced.pdf
## License
[sparklines](https://github.com/mitjafelicijan/sparklines) was written by [Mitja
Felicijan](https://mitjafelicijan.com) and is released under the BSD two-clause
license, see the LICENSE file for more information.