Installation with vue-chartjs not working?

[connecteev]

@nagix thanks for the repo, I was thnking of using roughViz earlier but this plugin will let me move completely to chart.js

The problem is with the installation / integration - I'm using chartjs with Vue (used https://github.com/apertureless/vue-chartjs as a starting point, see my code here https://github.com/connecteev/test-chartjs-plugin-rough/)

I then tried to integrate https://github.com/nagix/chartjs-plugin-rough but it does not work. My diff here: https://github.com/connecteev/test-chartjs-plugin-rough/commit/40043234c872e516fa02af8025b860a7d7e5a1b4

This is the error I am seeing, and the bar graph is not loading if I enable /nagix/chartjs-plugin-rough

Any idea how to get this to work when using vue?

Uncaught TypeError: rough.canvas is not a function
    at ChartElement.draw (chartjs-plugin-rough.js?1686:966)
    at Object.draw (Chart.js?30ef:7231)
    at Chart.draw (Chart.js?30ef:9825)
    at Chart.render (Chart.js?30ef:9782)
    at Object.callback (Chart.js?30ef:2204)
    at Object.advance (Chart.js?30ef:3528)
    at Object.startDigest (Chart.js?30ef:3501)
    at eval (Chart.js?30ef:3490)

[transitive-bullshit]

You need to actually import roughjs somewhere so it gets initialized in the global scope.

I don't think that chartjs-rough-plugin actually does this.

[connecteev]

@transitive-bullshit thank you for the tip. I just tried this but it doesn't do anything. Any idea whether I am importing Roughjs correctly?

<script>
import { Bar } from "vue-chartjs";
import Roughjs from "roughjs";
import ChartRough from "chartjs-plugin-rough";

export default {
  extends: Bar,
  props: ["data", "options"],
  plugins: [Roughjs, ChartRough],
  mounted() {
    this.addPlugin(Roughjs);
    this.addPlugin(ChartRough);
    this.renderChart(this.data, this.options);
  }
};
</script>

[transitive-bullshit]

Add this before your script.

<script src="https://cdn.jsdelivr.net/npm/roughjs@3.1.0/dist/rough.min.js"></script>

That'll add rough.canvas to the global namespace.

You also don't need to add Roughjs to the list of chartjs plugins.

[transitive-bullshit]

If that doesn't work, happy to help figure it out -- I can vouch that I have it working on my end.

Happy Holidays! 😄

[connecteev]

@transitive-bullshit thank you so much :) I did try your suggestion and I couldnt get it to work (not sure if I am doing it right though). Here's what I did: https://github.com/connecteev/test-chartjs-plugin-rough/commit/e693f1a20df2aca931a7f995b508b0e7abcbe1eb and the full code is at: https://github.com/connecteev/test-chartjs-plugin-rough/ Your thoughts are appreciated. Happy holidays to you too 😄