vue-chartist

Plugin Vuejs for Chartist.js

Install

npm install vue-chartist

Setup

This package include Chartist's javascript but not the stylesheet

const Vue = require("vue")
const vueChartist = require("../../index.js")
Vue.createApp({}).use(vueChartist)

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.

Vue.createApp({
  data: {
    chartData: {
      labels: ["A", "B", "C"],
      series: [
        [1, 3, 2],
        [4, 6, 5],
      ],
    },
    chartOptions: {
      lineSmooth: false,
    },
  },
})
  .use(vueChartist)
  .mount("#app")

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

app.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