DeviaVir / Vue Bar
Licence: mit
Simple, elegant spark bars for Vue.js
Stars: β 414
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Bar
React Native Chart
[NOT MAINTAINED] π Add line, area, pie, and bar charts to your React Native app
Stars: β 1,574 (+280.19%)
Mutual labels: svg, chart
Ngx Charts
π Declarative Charting Framework for Angular
Stars: β 4,057 (+879.95%)
Mutual labels: svg, chart
Picasso.js
A charting library streamlined for building interactive visualizations for the Qlik product suites.
Stars: β 175 (-57.73%)
Mutual labels: svg, chart
React Fast Charts
Blazing Fast Charting Library in React with loading time less than 50ms
Stars: β 113 (-72.71%)
Mutual labels: svg, chart
Wechart
Create all the [ch]arts by cax or three.js - Cax ε three.js ει δΈεεΎ[葨]
Stars: β 152 (-63.29%)
Mutual labels: svg, chart
Amcharts4
The most advanced amCharts charting library for JavaScript and TypeScript apps.
Stars: β 907 (+119.08%)
Mutual labels: svg, chart
android-charts
A curated list of Android Chart libraries.
Stars: β 69 (-83.33%)
Mutual labels: chart, bar
Charts
Simple, responsive, modern SVG Charts with zero dependencies
Stars: β 14,112 (+3308.7%)
Mutual labels: svg, chart
Pure Vue Chart
Simple and lightweight vue chart component without using chart library dependencies
Stars: β 50 (-87.92%)
Mutual labels: svg, chart
Rumble Charts
React components for building composable and flexible charts
Stars: β 293 (-29.23%)
Mutual labels: svg, chart
X6
π JavaScript diagramming library that uses SVG and HTML for rendering.
Stars: β 2,686 (+548.79%)
Mutual labels: svg, chart
Chart.xkcd
Chart.xkcd is a chart library that plots βsketchyβ, βcartoonyβ or βhand-drawnβ styled charts.
Stars: β 6,982 (+1586.47%)
Mutual labels: svg, chart
Pyecharts Snapshot
renders the output of pyecharts as png, jpeg, gif, svg, eps, pdf and raw base64
Stars: β 142 (-65.7%)
Mutual labels: svg, chart
React D3 Tree
π³ React component to create interactive D3 tree graphs
Stars: β 543 (+31.16%)
Mutual labels: svg, chart
Go Chart
go chart is a basic charting library in go.
Stars: β 3,254 (+685.99%)
Mutual labels: svg, chart
Vue Bars
π Simple, elegant spark bars for Vue.js
Installation
npm i vuebars -S
Usage
import Vue from 'vue'
import Bars from 'vuebars'
Vue.use(Bars)
vue template
<bars
:data="[1, 2, 5, 9, 5, 10, 3, 5, 2, 5, 1, 8, 2, 9, 0]"
:gradient="['#6fa8dc', '#42b983']">
</bars>
Inspired by
vuetrend - π Simple, elegant spark lines
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].