Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/risan/vue-chart-example

📊 Vue Chart Component Example with Chart.js
https://github.com/risan/vue-chart-example

chart vue

Last synced: about 2 months ago
JSON representation

📊 Vue Chart Component Example with Chart.js

Host: GitHub
URL: https://github.com/risan/vue-chart-example
Owner: risan
License: mit
Created: 2018-10-14T22:12:11.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2021-07-16T06:50:19.000Z (about 3 years ago)
Last Synced: 2024-06-27T07:36:46.288Z (3 months ago)
Topics: chart, vue
Language: Vue
Homepage: https://risan.github.io/vue-chart-example/
Size: 1.55 MB
Stars: 25
Watchers: 4
Forks: 10
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

# Vue Chart Component with Chart.js

A reactive chart component for Vue.js application, powered by [Chart.js](https://www.chartjs.org/) library. This is a final working example from my tutorial: [Vue Chart Component with Chart.js](https://bagja.net/blog/vue-chart-component-with-chartjs.html).

Check out the demo here: [risan.github.io/vue-chart-example](https://risan.github.io/vue-chart-example/).

![Vue Chart Example](https://media.giphy.com/media/557HUQUQ7RdMQbX9th/giphy.gif)

## Requirements

The following item is required to run this example:

* [Node.js](https://nodejs.org/)

## Installation

### 1. Clone the Repository

To clone this repository, run the following command on your terminal:

```bash
$ git clone [email protected]:risan/vue-chart-example.git
```

### 2. Install the Dependencies

Within the project directory, run the following command to install all of the required dependencies:

```bash
# Go to the project directory
$ cd vue-chart-example

# Install all of the dependencies
$ npm install

# Or if you prefer to use Yarn
$ yarn install
```

### 3. Run the Application 🎉

To run the application, run the following command:

```bash
$ npm run serve

# Or with yarn
$ yarn serve
```

The above command will start the development server. Open your browser and visit the application at [localhost:8080](http://localhost:8080).

### 4. Build for Production

To build the application for production, run the following command:

```bash
$ npm run build

# Or with yarn
$ yarn build
```

The optimized build files will be available at `dist` directory.

## License