DataSparkChart

components/data/SparkChart.vue

Small inline line chart rendered via Chart.js with configurable fill and stroke.

Scenarios
Empty

Single point

Overflow (200 points)

components/data/SparkChart.vue

Usage

<DataSparkChart :data = "[]" :ceiling = "ceiling" fillColor = "black" strokeColor = "black" :strokeWidth = "1" :padding = "0" />

Props

PropTypeDefaultDescription
dataArray[]Array of data points with values
ceilingNumberundefinedMax Y-axis value
fillColorString'black'Area fill color
strokeColorString'black'Line stroke color
strokeWidthNumber1Line width in px
paddingNumber0Chart padding

Related