Charts.css + Vue

Resources Plugins
1

Hi,

in a panel plugin, I am trying to switch from chart.js to charts.css and I don’t know how to go on due to my lack of vue knowledge. I hope someone can give me some hints.

I installed Vue Charts.css like so: Installation | Vue Charts.css
Created a simple component like this one: Usage | Vue Charts.css

For me, it looks like this:

<template>
    <div>
        Test
        <charts-css
            heading="Coffee count"
            type="bar"
            :labels="['Mon', 'Tue', 'Wed']"
            :datasets="[{ values: [4, 2, 70] }]"
        />
    </div>
</template>

<script>
import Vue from 'vue'
import VueChartsCSS from 'vue.charts.css'

Vue.use(VueChartsCSS)

export default {
    components: {},
}
</script>

I load this component into my main view, the “test” is rendered but not the chart. In the dev tools I can see the <charts-css … /> tag but it seems it’s not replaced by the “real” chart.

I played around, moved the imports to the main index.js but nothing seems to work. Maybe somebody here can give me a hint.