Sparkline Chart
How to use?
- Step 1 - Import the component
import SparklineChart from '@credenceanalytics/sparkline-chart'- Step 2 - Mention
SparklineChartin the components section
export default {
components:{
SparklineChart
}
}- Step 3 - Use it in the Vue template
<div style="width: 100px">
<SparklineChart :data="[808, 1475, 1426, 1884, 1396]" :options="{fill:'red'}" />
<SparklineChart :data="[1, 4, 2, 10, 9]" :options="{'stroke-width':'2', fill:'none', stroke: 'red'}" />
<SparklineChart :data="[90, 80, 60, 30, 40]"/>
</div>Props
| Prop name | Type | Value (example) | Default |
|---|---|---|---|
| data | Array | [ 3, 15, 76, 43, 3 ,23] | [0,0] |
| options | Object | {fill: "red","stroke-width": "5",stroke: "#ef7878"} | {fill: "none","stroke-width": "3",stroke: "grey"} |
Demo
Release History
| Version | Notes |
|---|---|
| 1.0.3 | Demo on Code Sandbox |
| 1.0.2 | Readme update |
| 1.0.1 | Removed devDependencies, and Readme update |