@hotdogee/vue3-trend NPM

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

vue vue3 trend svg graph chart data-visualization component

2.0.4

6 months ago

2.0.2

6 months ago