https://github.com/djaxho/pure-vue-chart
Simple and lightweight vue chart component without using chart library dependencies
https://github.com/djaxho/pure-vue-chart
chart charts graph svg trend vue vue-components vue2 vue3 vuejs
Last synced: about 1 month ago
JSON representation
Simple and lightweight vue chart component without using chart library dependencies
- Host: GitHub
- URL: https://github.com/djaxho/pure-vue-chart
- Owner: djaxho
- Created: 2019-06-10T08:52:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:49:35.000Z (almost 3 years ago)
- Last Synced: 2024-04-24T08:15:46.568Z (over 1 year ago)
- Topics: chart, charts, graph, svg, trend, vue, vue-components, vue2, vue3, vuejs
- Language: Vue
- Size: 1.76 MB
- Stars: 61
- Watchers: 4
- Forks: 19
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Pure Vue Chart
A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies
Example
```
```
When props are updated the graph will automatically animate to the new values.
## Install
```
npm i pure-vue-chart
```
Import it:
```
import PureVueChart from 'pure-vue-chart';
```
Register it in your component:
```
components: {
PureVueChart,
},
```
## Use it
```
```
## Options
To further control the display of data, you can use simple props to manipulate the charts. Here are some examples:
#### Most of the available props below are self-explanatory:
```
:points=[1,4,5,3,4]
:show-y-axis="false"
:show-x-axis="true"
:width="400"
:height="200"
:show-values="true"
:use-month-labels="true"
:months="['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']"
```
### Additional Features:
#### Trendline
You can add a simple linear trend line by using the following props:
```
:show-trend-line="true"
:trend-line-width="2"
trend-line-color="lightblue"
```
#### X-axis labels:
X-axis labels, by default will be from 1 - length-of-data.
But you can automatically use Months by using the prop `:use-month-labels="true"`.
Or you can provide the data as an array of objects, each with a `value` and `label` like so:
```
:points=[{label: 'N', value: 41.1}, {label: 'NW', value: 1}, {label: 'W', value: 15}]
```
Contributing
I'm open to any issues or pull requests so long as
they are simple, easy to read, use the eslint settings in package.json,
and follow commitizen-esque style commit formats. Just open an issue on github and start a discussion.
- pure-vue-chart issues - https://github.com/djaxho/pure-vue-chart/issues
Authors or Acknowledgments
- Danny Jackson
List of features
- Simple bar charts
- Line charts (planned)
- Pie charts (planned)
- Rose charts (planned)
License
This project is licensed under the MIT License but please create pull requests to improve this package together rather that copying itto another project.