Vue Charts is a project that showcases what you can do with Vue and Chart.js, tied together by the vue-chartjs package.
When I began working with Vue, I was looking for a charting library with a wide range of options, smooth animations, and simple implementations. I had worked with chart.js a few years ago, and once I found this repository I was sold.
The goal of this project is to show developers a live, working demo of vue-chartjs in action. Hopefully it can make someone else's work a little bit easier.
It will include:
- Multiple chart types (line, bar, doughnut, pie, polar area, radar, bubble)
- Charting with local data.
- Charting with API data.
- Charting with reactive props.
Before you get set up, you can try it out here: https://vue-charts-demo.netlify.com/
You'll need a recent installation of Node and Yarn.
- Clone the Repository:
git clone https://github.com/john-bauer/vue-charts
- cd into the project:
cd vue-charts
- Install dependencies:
yarn add
- Run the app:
yarn serve
- Vue.js: Scaffolded with vue CLI 3.
- Vue Router: Using history mode.
- Vuex: Set up for modules.
- SCSS: with dart-sass.
- Chart.js: For charting.
- vue-chartjs: Wrapper for Chart.js.
- Axios: For making API requests.
- Buefy: A lightweight UI Library based on Bulma.
If you have any suggestions, spot a defect, or see improvements that can be made, I'm all ears. Open up a PR or create an issue and we'll work together on making this better.
License is MIT. Feel free to use this source code in your own projects.