svg-sparkline

A Web Component that builds an SVG Sparkline.

Demo | Further reading

Examples

General usage example

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

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9"></svg-sparkline>

With curve

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" curve="true"></svg-sparkline>

Start and End labels

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>

Animated

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" animate="true"></svg-sparkline>

Defined Animation Duration

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" animate="true" animation-duration="2s"></svg-sparkline>

Defined Animation Delay

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" animate="true" animation-delay="2s"></svg-sparkline>

Defined color

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" color="purple"></svg-sparkline>

With gradient

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>

Defined gradient color

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true" gradient-color="rebeccapurple"></svg-sparkline>

Filled

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true"></svg-sparkline>

Defined fill color

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true" fill-color="rebeccapurple"></svg-sparkline>

Defined endpoint color

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>

Defined endpoint width

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>

Without endpoint

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>

Defined line width

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" line-width="6"></svg-sparkline>

Defined width and height

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>

Set a custom title

<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" title="Sparkline with a custom title"></svg-sparkline>

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: npm install @chrisburnell/svg-sparkline
2. Download the source manually from GitHub into your project.
3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="svg-sparkline.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@chrisburnell/svg-sparkline/svg-sparkline.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@chrisburnell/svg-sparkline"
></script>

Credit

With thanks to the following people:

• David Darnes for creating this Web Component repo template
• Jeremy Keith for inspiring me to build my own sparklines based on his Canvas sparklines