https://github.com/chrisburnell/svg-sparkline

A Web Component for building an SVG Sparkline.
https://github.com/chrisburnell/svg-sparkline

custom-element custom-elements customelement customelements javascript sparkline web-component web-components webcomponent webcomponents

Last synced: 3 days ago
JSON representation

A Web Component for building an SVG Sparkline.

• Host: GitHub
• URL: https://github.com/chrisburnell/svg-sparkline
• Owner: chrisburnell
• License: mit
• Created: 2024-01-21T06:40:52.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-03-14T17:11:40.000Z (7 months ago)
• Last Synced: 2024-05-01T14:16:05.584Z (5 months ago)
• Topics: custom-element, custom-elements, customelement, customelements, javascript, sparkline, web-component, web-components, webcomponent, webcomponents
• Language: JavaScript
• Homepage: https://chrisburnell.com/svg-sparkline/
• Size: 66.4 KB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    



# `svg-sparkline`

A Web Component that builds an SVG Sparkline.

**[Demo](https://chrisburnell.github.io/svg-sparkline/demo.html)** | **[Further reading](https://chrisburnell.com/svg-sparkline/)**

## Examples

### General usage example

```html

```

### With curve

```html

```

### Start and End labels

```html

```

### Animated

```html

```

### Defined Animation Duration

```html

```

### Defined Animation Delay

```html

```

### Defined color

```html

```

### With gradient

```html

```

### Defined gradient color

```html

```

### Filled

```html

```

### Defined fill color

```html

```

### Defined endpoint color

```html

```

### Defined endpoint width

```html

```

### Without endpoint

```html

```

### Defined line width

```html

```

### Defined width and height

```html

```

### Set a custom title

```html

```

## Features

This Web Component builds a sparkline based on the required `values` attribute.

## Installation

You have a few options (choose one of these):

1. Install via [npm](https://www.npmjs.com/package/@chrisburnell/svg-sparkline): `npm install @chrisburnell/svg-sparkline`

1. [Download the source manually from GitHub](https://github.com/chrisburnell/svg-sparkline/releases) into your project.

1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

### Usage

Make sure you include the `` in your project (choose one of these):

```html

<!-- Host yourself -->

<script type="module" src="svg-sparkline.js">

```

```html

```

```html

```

## Credit

With thanks to the following people:

- [David Darnes](https://darn.es) for creating this [Web Component repo template](https://github.com/daviddarnes/component-template)

- [Jeremy Keith](https://adactio.com) for inspiring me to build my own sparklines based on his [Canvas sparklines](https://adactio.com/journal/5941)