Problem with threshold plugin

[rayoplateado]

Hi!

I'm using chartist through vue-chartist. The point is that I want to use the threshold plugin, but if I install it and call into a chart, it said to me Chartist is not defined, which is correct, because chartist is in Vue.chartist

How can I set Chartist value called into the plugin to point to Vue-chartist without modify the threshold plugin?

[Yopadd]

Hi,

It's complicated, it seems that react-chartist has the same problems.
I will think about it but without guarantee.

[Yopadd]

I found a quick dirty tricks.

Vue.use(VueChartist)
Chartist = Vue.chartist
require('chartist-plugin-pointlabels')
Vue.chartist = Chartist

...

options: {
  plugins: [
    Vue.chartist.plugins.ctPointLabels({
      textAnchor: 'middle'
    })
  ]
},

I have managed to run chartist-plugin-pointlabels but not chartist-plugin-threshold 😕
Maybe I badly use chartist-plugin-threshold ...

[rayoplateado]

I think I've tried this with no success. Let me test again and I'll let you know!

Thank you @Yopadd!

[fyyyyy]

Vue.chartist assignment isnt required imo. You just need to define Chartist on the window object before importing the plugin

You can do this in your main/index.js

import VueChartist from 'vue-chartist';

window.Chartist = Chartist;
require('chartist-plugin-pointlabels');

Vue.use(VueChartist)

If you want to use it in a subcomponent, you can import Chartist

<script>
import _ from 'lodash';
import Chartist from 'chartist';

export default {
  props: [
  ],
  data() {
    return {
      chartOptions: {
        plugins: [
          Chartist.plugins.legend({
            legendNames: [...,
          }),

[Mathieu-R]

It doesn't work for me with threshold plugin.