johndab / vue-chartist

Pluging chartist for vuejs

vue-chartist

Plugin Vuejs for Chartist.js

Install

npm install vue-chartist

Setup

This package include Chartist's javascript but not the stylesheet

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

Usage

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

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

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

  • Line
  • Bar
  • Pie

• data - Object data object like this

const data = {
    labels: ["A", "B", "C"],
    series:[[1, 3, 2], [4, 6, 5]]
}

• options - Object 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 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 data are empty or not definied the plugin add ct-nodata (or a custom class, see options plugin) class and write 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.

Options Plugin

Vue.use(require('vue-chartist'), {
    messageNoData: "You have not enough data",
    classNoData: "empty"
})

Chartist instance

There is two way to access this Chartist's instance : By Vue instance

Vue.chartist

or in component

this.$chartist