vchartist

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)
      }
    }.bind(this))
  }

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

install

npm install vchartist

Usage

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() {
      //animation
    }
  }, {
    //an other event handler
  }]

• responsive-options - Object the object for responsive options

Example

<chartist
  ratio="ct-major-second"
  type="Line"
  :data="chartData"
  :options="chartOptions">
</chartist>

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'
})

License

MIT