@credenceanalytics/sparkline-chart
v1.0.4
Published
A sparkline is a very small line chart, typically drawn without axes or coordinates. It presents the general shape of the variation in some measurement, such as temperature or stock market price, in a simple and highly condensed way.
Downloads
7
Maintainers
jiteshsuthar
atulknowsme
shruti_shende
sonalnadkar
cred-shubham
sagarf
prajaktacred
mandakadam
prabhuvikas
jimmyjammerx
suraj_chavan
mohinim18Keywords
Readme
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 |