@credenceanalytics/sparkline-chart

Sparkline Chart

How to use?

• Step 1 - Import the component

import SparklineChart from '@credenceanalytics/sparkline-chart'

• Step 2 - Mention SparklineChart in 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

Code Sandbox

Release History

Version	Notes
1.0.3	Demo on Code Sandbox
1.0.2	Readme update
1.0.1	Removed devDependencies, and Readme update