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.
npm i native-sparkline --save<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>| 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 |