Example usage of chartist in vuejs

ui-chart.vue

<style lang="sass">
  @import '../sass/common';

  $ct-series-colors: (
    colour('x'),
    colour('y'),
    colour('a'),
    colour('b'),
    colour-darken('x', 10),
    colour-darken('y', 10),
    colour-darken('a', 10),
    colour-darken('b', 10),
    colour-darken('x', 15),
    colour-darken('y', 15),
    colour-darken('a', 15),
    colour-darken('b', 15),
    colour('mobilleo'),
    colour('teal'),
    colour('purple'),
  ) !default;


  @import '~chartist/dist/scss/chartist.scss';
</style>

<template>
  <div class="ui-chart ct-chart ct-perfect-fourth"></div>
</template>

<script>
  import _          from 'lodash'
  import Chartist   from 'chartist'

  export default {

    props: {
      type : {
        type              : String,
        default           : 'Bar'
      },
      labels              : Array,
      series              : Array,
      options             : Object,
      responsiveOptions   : Object,
    },

    data () {
      return {
        chart: null,
      }
    },

    computed: {

      data () {
        return {
          labels          : this.labels,
          series          : this.series
        }
      },

      capitalizeType () {
        return _.capitalize(this.type)
      }

    },

    methods: {
    },

    ready () {
      this.$nextTick( function () {
        this.chart = new Chartist[this.capitalizeType](this.$el, this.data, this.options, this.responsiveOptions);
      } )
    }

  }
</script>

v-chart-budget.vue

<template>
  <div>
    <ui-chart type="bar" :labels="labels" :series="series" :options="options"></ui-chart>
  </div>
</template>

<script>
  import UiChart from '../components/ui-chart.vue'

  export default {
    data () {
      return {
        options : {
          seriesBarDistance: 10,
          reverseData: true,
          horizontalBars: true,
          axisY: {
            offset: 50
          }
        },
        labels  : ['Fuel', 'Flights', 'Transit', 'Expenses', 'Other'],
        series  : [
          [1500, 4500, 1000, 2000, 1000],
          [1337, 2123, 564, 1800, 3500],
        ]
      }
    },

    components: {
      UiChart
    }
  }
</script>