🚀 Socket Launch Week 🚀 Day 5: Introducing Socket Fix.Learn More
Socket
Sign inDemoInstall
Socket

vue-chartist

Package Overview
Dependencies
Maintainers
2
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-chartist

Plugin chartist for vuejs

3.0.0
latest
Source
npm
Version published
Weekly downloads
5.2K
2.76%
Maintainers
2
Weekly downloads
 
Created
Source

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

Keywords

plugin

FAQs

Package last updated on 08 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts