vue-chartist
v3.0.0
Published
Plugin chartist for vuejs
Downloads
21,462
Readme
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 sitetype -
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 Documentationevent-handlers -
Array
a special array to usechart.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