0.0.2 • Published 4 years ago
native-sparkline v0.0.2
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 --saveExample
<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 |