📊 Vue Chart Component Example with Chart.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
public config: Use env file to set base url Oct 31, 2018
src Reactive line chart Oct 15, 2018
.gitignore config: Use env file to set base url Oct 31, 2018
LICENSE.md 📚 Update README Oct 15, 2018
README.md Update README.md Nov 8, 2018
babel.config.js init Oct 14, 2018
package.json config: Update package.json Oct 31, 2018
vue.config.js config: Set base url for production Oct 31, 2018
yarn.lock Github page deployment script Oct 15, 2018


Vue Chart Component with Chart.js

A reactive chart component for Vue.js application, powered by Chart.js library. This is a final working example from my tutorial: Vue Chart Component with Chart.js.

Check out the demo here: risan.github.io/vue-chart-example.

Vue Chart Example


The following item is required to run this example:


1. Clone the Repository

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

$ git clone git@github.com:risan/vue-chart-example.git

2. Install the Dependencies

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

# 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:

$ 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.

4. Build for Production

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

$ npm run build

# Or with yarn
$ yarn build

The optimized build files will be available at dist directory.


MIT © Risan Bagja Pradana