vue-sparkline

A D3 sparkline component for vue.

Demo

Installation

npm i vue-d3-sparkline

Basic usage

import SparkLine from "vue-d3-sparkline";

<SparkLine :data="data" /> 

Data format

Standard

data = [{x: <number>, y: <number>}, ...]

Custom

different object form:

dataCustom = [{xval: <number>, value: <number>}, ...]
xAccessor = d => d.xval
yAccessor = d => d.value

or as an array of arrays:

dataCustom = [[<number>, <number>], ...]
xAccessor = d => d.[0]
yAccessor = d => d.[1]

<Sparkline :data="dataCustom" :x-accessor="xAccessor" :y-accessor="yAccessor" />

Properties

| prop | type | required | default value | | ------------ |:---:|:--------:|:-------------:| | data | Array(Object) | false (but really, should have some data) | [] | | showPoints | boolean | false | false | | xAccessor | function | false | d => d.x | | yAccessor | function | false | d => d.y | | display | string ('inline', 'fill', 'newline') | false | 'inline' | | height | number | false | 16 | | aspectRatio | number | false | 5 | | responsive | boolean | false | false |