Vue Bars

🌈 Simple, elegant spark bars for Vue 3

Installation

npm i @dnewkerk/vue-bars -S

Usage

import VueBars from "@dnewkerk/vue-bars";

vue template

<vue-bars
  :data="[1, 2, 5, 9, 5, 10, 3, 5, 2, 5, 1, 8, 2, 9, 0]"
  :gradient="['#6fa8dc', '#42b983']"
>
</vue-bars>

Upgrading from vuebars (Vue 2)

For consistency and to resolve lint errors, the repository and components have been renamed.

• Update imports from import Bar to import VueBars
• Update <bar></bar> to <vue-bars></vue-bars>
• Global installation has been removed. Please import the component where needed in your project.

Inspired by

vuetrend - 📈 Simple, elegant spark lines

Forked from https://github.com/DeviaVir/vue-bar to support Vue 3

Props

Name	Type	Default	Description	Example
data	Number|Object	undefined	The data accepted by Vue Bars 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.	-
rounding	Number	2	To control radius on each bar's corners	-
barWidth	Number	4	Set width of each bar	-
labelRotate	Number	-45	To control rotation of labels	-
labelSize	Number	0.7	To control size of labels	-
labelColor	String	#999	To control color of labels	-
labelData	String	[]	Array of strings	['label1','label2','label3']
minBarHeight	Number	3	Minimum height	-
autoDraw	Boolean	false	Allow the line to draw itself on mount. Set to true to enable, and customize using autoDrawDuration and autoDrawEasing.	-
growDuration	Number	0.5	The amount of time, in seconds, that the autoDraw animation should span. This prop has no effect if autoDraw isn't set to true.	-
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 Bars will be delegated to the SVG. The line inherits these properties if none of its own override them.

On-the-fly reloading

Make sure you use pass the same variable for your data as for the key, this will make sure Vue recognizes changes to your data array, and consequently forces a reload of the instance.

TODO

• Unit test

License

MIT