🌈 Simple, elegant spark lines for Vue.js
Clone or download
Latest commit 05da2c8 Jun 19, 2018
Failed to load latest commit information.
dist build 0.3.2 Jan 25, 2018
docs update demo Mar 29, 2018
media Update logo Mar 16, 2017
src fix: compatible with ssr, fixed #14 Jan 25, 2018
.eslintrc init Mar 10, 2017
.gitignore Rename to vue-trend-component Mar 10, 2017
LICENSE init Mar 10, 2017
README.md Update README.md Jun 19, 2018
package.json Release v0.3.2 Jan 25, 2018
rollup.config.js docs: update Mar 15, 2017
vbuild.config.js update demo Mar 29, 2018
yarn.lock chore: fix test script Sep 14, 2017



More powerful, more flexible chart library for Vue.js πŸ‘‰ https://github.com/QingWei-Li/laue


Vue Trend

Vue Trend

🌈 Simple, elegant spark lines for Vue.js

npm vue


npm i vuetrend -S


import Vue from 'vue';
import Trend from 'vuetrend';


vue template

  :data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
  :gradient="['#6fa8dc', '#42b983', '#2c3e50']"

Live Demo


unsplash/react-trend - πŸ“ˆ Simple, elegant spark lines


Name Type Default Description Example
data Number|Object undefined The data accepted by Vue Trend is incredibly simple: An array of y-axis values to graph. [120, 149, 193.4, 200, 92] or [{ value: 4 }, { value: 6 }, { value: 8 }]
gradient String ['#000'] Colour can be specified as any SVG-supported format (named, rgb, hex, etc). ['#0FF', '#F0F', '#FF0']
width Number auto Set an explicit width for your SVG. -
height Number auto Set an explicit height for your SVG. -
padding Number 8 If you set a very large strokeWidth on your line, you may notice that it gets "cropped" towards the edges. -
smooth Boolean false Smooth allows the peaks to be 'rounded' out so that the line has no jagged edges. -
radius Number 10 When using smoothing, you may wish to control the amount of curve around each point. This prop has no effect if smooth isn't set to true. -
autoDraw Boolean false Allow the line to draw itself on mount. Set to true to enable, and customize using autoDrawDuration and autoDrawEasing. -
autoDrawDuration Number 2000 The amount of time, in milliseconds, that the autoDraw animation should span. This prop has no effect if autoDraw isn't set to true. -
autoDrawEasing String ease The easing function to use for the autoDraw animation. Accepts any transition timing function within the CSS spec (eg. linear, ease, ease-in, cubic-bezier...). -
max Number -Infinity Specify max value -
min Number Infinity Specify min value, This is useful if you have multiple lines. See #8 -

SVG Props

By default, all properties not recognized by Vue Trend will be delegated to the SVG. The line inherits these properties if none of its own override them.

This means that, among other properties, you can use:

  • stroke to set a solid colour,
  • strokeWidth to change the default line thickness,
  • strokeOpacity to create a transparent line,
  • strokeLinecap/strokeLinejoin to control the edges of your line,
  • strokeDasharray to create a dashed line, and
  • strokeDashoffset to control where the dashes start.


yarn dev
# open localhost:4000


  • Unit test