Sparklines

This is a zero dependency native web-component for generating sparklines.

Sparklines can be used to show a trend of data, as well as allowing your users to drill into specific metrics.

Getting started

npm i native-sparkline --save

Example

<dan-sparkline
  width=400
  height=100
  data="10,6,26,37,62,86,89,75,102,150,64,22,50"
  stroke-color="hsl(204, 86%, 53%)"
  stroke-width="3"
  spot-size="3"
  cursor-width=0
  animated=true
></dan-sparkline>

Customisation

Properties

Property	Attribute	Description	Type	Default
animated	animated	Whether the sparkline should be animated.	boolean	false
animationDelay	animation-delay	The delay before the animation takes place.	number	0
animationDuration	animation-duration	The duration of the animation.	number	200
animationTimingFunction	animation-timing-function	Which timing function to use for the animation.	string	'linear'
cursorColor	cursor-color	The colour of the cursor line.	string	'rgba(0,0,0,0.5)'
cursorWidth	cursor-width	The width of the cursor line.	number	1
data	data	The data which this sparkline should use.	string	undefined
fillColor	fill-color	The colour which should be used for the sparkline fill.	string	'rgba(0,0,0,0)'
height	height	The height of the sparkline, in pixels.	number	20
interactive	interactive	Whether the sparkline should be interactive. When enabled, a cursor will appear next to the closest datapoint when hovered over.	boolean	true
max	max	The maximum value the trend should use.	number	undefined
min	min	The minimum value the trend should use.	number	0
spotSize	spot-size	The radius of the point which is visible when a datapoint is hovered over.	number	5
strokeColor	stroke-color	The colour which should be used for the sparkline line.	string	'rgba(0,0,0,1)'
strokeWidth	stroke-width	The width of the sparkline line, in pixels.	number	2
width	width	The width of the sparkline, in pixels.	number	100