vue-chartist

Plugin Vuejs for Chartist.js

Install

npm install vue-chartist

Setup

This package include Chartist

Vue.use(require('vue-chartist'))

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 hander
}]

• responsive-options - Array 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 easliy 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 witre a message on the element. That 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('vue-chartist'), {
    messageNoData: "You have not enough data"
})