How To Use

1. Include vue-chartcss build file localized in dist/vue-chartcss.js after call vue.js

2. Import vueChartcss component in your Vue instance

<script type="text/javascript">
  vue = new Vue({
    el: 'body',
    components: vueChartcss
  });
</script>

Has other ways to call vue-chartcss in your Vue instance, for vue-chartcss work with other Vue components.

1. Call each element in components object

<script type="text/javascript">
  var PulseLoader = VueSpinner.PulseLoader

  var chart = vueChartcss.chart
  var chartBar = vueChartcss.chartBar
  var chartGroup = vueChartcss.chartGroup

  vue = new Vue({
    el: 'body',
    components: { chart, chartBar, chartGroup, PulseLoader }
  });
</script>

2. Or merge vue-chartcss with a object via Object.assign

<script type="text/javascript">
  var PulseLoader = VueSpinner.PulseLoader

  vue = new Vue({
    el: 'body',
    components: Object.assign({PulseLoader /* other Vue components */}, vueChartcss)
  });
</script>

or

1. Import the source vue-chartcss in your build*

import vueChartcss from './chart/vue-chartcss.vue'
new Vue({
  el: 'body',
  components: vueChartcss
})

* The 2 ways above of integration of vue-chartcss and other Vue components work here too

vue-chartcss already has chart.css in his build and don't need any external css file.

vue-chartcss

vue-chartcss has 3 main elements. <chart>, <chart-bar>, <chart-group>

<chart>

<chart> is the container of chart and only can receive one property: vertical="true" if you want turn chart into vertical bars

<chart-bar>

<chart-bar> is the bar of chart. He's placed inside <chart> and can receive size, color, percent properties that respect the reference of chart.css. <chart-bar> also can receive show-percentage="true" to show number of percentage in chart.

<chart-group>

<chart-group> is the only element that don't receive any property. It's placed inside of <chart> element and <chart-bar>s inside of him to make a group of bars.