vchartist
vchartist is a modified version of Chartist.js for the sake of plugin development base on webpack.
When develop a chartist plugin, Chartist variable is often imported to provide some inner function. but in webpack, if you import chartist, it's code will be packed in the plugin's file. So i rewrite the chartist's Base Class. Provide Chartist variable as a default parameter when plugin function is called
if thisoptionsplugins thisoptionsplugins
vchartist also provide a vue plugin base on vue-chartist.
install
npm install vchartist
Usage
In your HTML, add <chartist>
tag. This tag take following attributes:
-
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 usechart.on(event, function)
const eventHandlers = event: 'draw' { //animation } //an other event handler
- responsive-options -
Object
the object for responsive options
Example
Note: think about using the dynamic props of Vuejs to bind easily your data or other.
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 write 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