vue-chartist

    3.0.0 • Public • Published

    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

    Install

    npm i vue-chartist

    DownloadsWeekly Downloads

    12,921

    Version

    3.0.0

    License

    WTFPL

    Unpacked Size

    10.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • kartsims
    • yopadd