victorgarciaesgi/vue-chart-3

Documentation on plugin registery is tricky to understand.

LovelyAndy opened this issue · 4 comments

LovelyAndy commented

Describe the bug

A clear and concise description of what the bug is.
This isn't necessarily a bug, but rather a bit of confusion that comes up reading the documentation and comparing it with you examples.

In your codesandbox you use Chart.register(...registerables) and in the documentation about plugins you use Chart.register(MatrixController, MatrixElement)

I'm just not sure how I would now use a plugin along side this Chart.register(...registerables) as I get an error when attempting it

I'm trying to get a percentage to render in the middle of a doughnut chart and it seems I need to use a plugin to get this to work, but with the combination of my limited understanding of the library and the composition API, I'm at a real loss.
I've opened a question on stackoverflow, but so far no one has given it a go.

Someone was working verion for Vue2, but their usage of Chart.pluginService.register({ is not easy to convert in the composition api syntax for this library
https://jsfiddle.net/ellisdod/5efa8yo9/

I know this isn't a bug or anything, but I know people have run into the same issues as me and I hope others can get some use out of this.

Cheers again for the great wrapper library and your help previously. Happy new year!

To Reproduce

Put a reproduction link here based on this templates
https://codesandbox.io/s/responsive-chart-font-gk28n?file=/src/components/Chart2.vue:0-2444

Version of vue-chart-3

"vue-chart-3": "^0.5.11",

Version of Vue

  • [ X] Vue 3
  • Vue 2
  • Nuxt 2
  • Nuxt 3
victorgarciaesgi commented

Hi! You're right it's a bit confusing. For the Matrix plugin exemple, it should look like this:
Chart.register(MatrixController, MatrixElement, ...registrables)

I will update the docs tomorrow

victorgarciaesgi commented

Also you're not forced to use the composition api with this lib! It works with options and class api too. The only requirement is that @vue/composition-api needs to be registered in your app for vue-chart-3 to work

Exemple with class api https://codesandbox.io/s/vue-chart-3-vue-2-class-api-f7gv1?from-embed

LovelyAndy commented

Thank you for the quick response as always! I am using the composition API so I definitely want to get it working with it. I was just saying that maybe trying to use plugins with this library alongside Composition API is where I get a bit confused.
My Codesandbox shows my current progress and it's not actually working the way I have tried thus far. If you get a chance perhaps you can a take a look. It would be a great example to use for your demos section!

LovelyAndy commented

So, I got a very rough version fixed, but I think this is kind of sloppy implementation. Right now it's registered globally and therefore the middle value will ALWAYS show on all chart types.
https://codesandbox.io/s/responsive-chart-font-gk28n?file=/src/components/Chart2.vue

In my own project which uses ts properly, I had to do a check inside of the plugin like this:

var centerText = {
  id: 'center-text',
  beforeDraw: function (chart: any) {
    const type = chart?.config?.type
    if (type !== 'doughnut') return

    var width = chart.width
    var height = chart.height
    var ctx = chart.ctx

    ctx.restore()
    var fontSize = (height / 114).toFixed(2)
    ctx.font = fontSize
    ctx.textBaseline = 'middle'

    var text = 800
    var textX = Math.round((width - ctx.measureText(text).width) / 2)
    var textY = height / 2

    ctx.fillText(text, textX, textY)
    ctx.save()
  },
}
Chart.register(...registerables, centerText)

I really am not sure how I can implement this in your library, but hopefully this is an example you can add to your documentation someday if you can figure out how to register the plugin better than I can.

  • 👍1