@hotdogee/vue3-trend

Simple, elegant spark lines for Vue 3
14,619
vue vue3 component svg graph chart data-visualization trend
Install
npm install @hotdogee/vue3-trend
Latest Version:2.0.4
Vue:3
License:MIT
Last Updated:Apr 16, 2025
Links: GitHub  ·  npm
Maintainer: hotdogee

Live

Installation

npm i @hotdogee/vue3-trend

Usage

import VueTrend from '@hotdogee/vue3-trend'

vue template

<VueTrend
  :data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
  :gradient="['#6fa8dc', '#42b983', '#2c3e50']"
  auto-draw
  smooth
>
</VueTrend>

Lineage

All credits go to these open-source works and resources 🙏

  • Rewritten for Vue 3 in TypeScript
  • Forked from vue-trend - 🌈 Simple, elegant spark lines (Vue 2)
  • Inspired by unsplash/react-trend - 📈 Simple, elegant spark lines (React)

Props

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']
gradientDirection String top Top, Bottom, Left or Right. -
width String 100% Set an explicit width for your SVG. 100% or 300px
height String 100% Set an explicit height for your SVG. 100% or 75px
viewWidth Number 300 Set an explicit width for your SVG viewBox. -
viewHeight Number 75 Set an explicit height for your SVG viewBox. -
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. -
SVG Props

By default, all properties not recognized by Vue Trend will be delegated to the SVG.

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.

Development

npm i
npm run dev
# open localhost:5173

Documentation Site

npm i
npm run docs:dev
# open localhost:5173

License

MIT

Related Packages

vuetrend

Simple, elegant spark lines for Vue.js

94,583 1,183
component data-visualization graph svg trend vue
@ddgll/vue3-trend

Convert images from an url or an input file to another type

51,856 1
component data-visualization graph svg trend vue vue3
vue3trend

Simple, elegant spark lines for Vue.js v3

18,637
component data-visualization graph svg trend vue vue3
vuebars

Simple, elegant spark bars for Vue.js

16,428 433
component data-visualization graph svg vue bars
laue

Modern charts for Vue.js

19,914 263
chart component graph svg trend vue area bar charts line +1

Version History

Version Released License
2.0.4 MIT
2.0.2 MIT