a vue version of chartistjs

Usage no npm install needed!

<script type="module">
  import vchartist from '';



vchartist is a modified version of Chartist.js for the sake of plugin development base on webpack.

When develop a chartist plugin, Chartist variable is often imported to provide some inner function. but in webpack, if you import chartist, it's code will be packed in the plugin's file. So i rewrite the chartist's Base Class. Provide Chartist variable as a default parameter when plugin function is called

  if (this.options.plugins) {
    this.options.plugins.forEach(function (plugin) {
      if (plugin instanceof Array) {
        plugin[0](this, plugin[1], Chartist)
      } else {
        plugin(this, Chartist)

vchartist also provide a vue plugin base on vue-chartist.


npm install vchartist


In your HTML, add <chartist> tag. This tag take following attributes:

  • ratio - String class ratio of Chartist, see values on Chartist web site

  • type - String (required) the chart type, possible values :

    • Line
    • Bar
    • Pie
  • data - Object the data object like this

  const data = {
    labels: ['A', 'B', 'C'],
    series: [
      [1, 3, 2],
      [4, 6, 5]
  • options - Object the options object, see defaultOptions on API Documentation

  • event-handlers - Array a special array to use chart.on(event, function)

  const eventHandlers = [{
    event: 'draw',
    fn() {
  }, {
    //an other event handler
  • responsive-options - Object the object for responsive options



Note: think about using the dynamic props of Vuejs to bind easily your data or other.

  new Vue({
    el: '#app',
    data: {
      chartData: {
        labels: ['A', 'B', 'C'],
        series: [
          [1, 3, 2],
          [4, 6, 5]
      chartOptions: {
        lineSmooth: false

Customize chart with no data

If chart datas are empty or not definite the plugin add ct-nodata class and write a message on the element. Way, you can customize your element with CSS when you have no data to display. To choose your message use the options plugin :

Vue.use(require('vchartist'),  {
  messageNoData: 'You have not enough data'