vue-chartist

Plugin Vuejs for Chartist.js

Install

npm install vue-chartist

Setup

Ensure you have installed correctly Chartist.js

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

Usage

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

• id-chart - String (required)
  id attribute for the query selector of Chartist
• 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 - Object
  the object for responsive options

Example :

<chartist
    id-chart="ct-chart"
    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. 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"
})

Example

Go to https://chartist-vuejs-jneklbdxoq.now.sh/
Powered by 𝚫 now https://zeit.co/now