<div id="app">
	<section class="container">
    <h1>Demo examples of vue-charts</h1>
    <div class="columns">
      <div class="column">
        <h3>Line Chart</h3>
        <chartjs-line></chartjs-line>
      </div>
      <div class="column">
        <h3>Bar Chart</h3>
        <chartjs-bar></chartjs-bar>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <h3>Radar Chart</h3>
        <chartjs-radar></chartjs-radar>
      </div>
      <div class="column">
        <h3>Data Binding Line Chart</h3>
        <!--Data Binding Line Chart Example-->
      </div>
    </div>
  </section>
</div>
h1 {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 30px;
}
Vue.use(VueCharts);
const app = new Vue({
	el: '#app',
});
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css

External JavaScript

  1. https://unpkg.com/vue
  2. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js
  3. https://unpkg.com/hchs-vue-charts@1.2.8