Vchartist

a vue version of chartistjs

Version: 1.0.3 Updated: 07/21/2016

By: hcl1687 License: MIT

Downloads Last 30 Days: 37

Install

npm i vchartist
yarn add vchartist

Repository: https://github.com/hcl1687/vchartist

CDNs

bundle.run: https://bundle.run/vchartist

jsDelivr: https://cdn.jsdelivr.net/npm/vchartist

unpkg: https://unpkg.com/vchartist

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

Categories: Vue js