Billboard.js: Nuxt.js not being able to render an example chart

[elielr01]

Description

Hi, thanks for the hard work with this library! I love the charts.

I need help, please. I was trying to render a simple chart within a Vue component but it's throwing this error:

client.js?06a0:97 TypeError: $$.generatePoint is not a function
    at ChartInternal.initParams (billboard.esm.js?25f5:7503)
    at ChartInternal.init (billboard.esm.js?25f5:7448)
    at new Chart (billboard.esm.js?25f5:8985)
    at Object.generate (billboard.esm.js?25f5:18902)
    at VueComponent.mounted (pie-chart.vue?796c:10)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)

I'm using nuxt v2.14.6, billboard.js v2.1.1
I'm also making sure that it is only rendered on Client Side. (Nuxt is running in SPA mode, this chart component is wrapped in a client-only tag, and billboard is only imported and used in the mounted hook)

Steps to check or reproduce

This is the component I wrote:

<template>
  <div id="line"></div>
</template>

<script>
export default {
  mounted() {
    const { bb } = require('billboard.js')
    const chart = bb.generate({
      bindto: '#line',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ],
        type: 'line'
      }
    })
  }
}
</script>

I literally took it from the examples page from the docs. As soon as I mount it, I get the above error.
Am I doing something wrong?

Appreciate the help!

[elielr01]

I should also mention that this same component works if I downgrade to billboard v1.12.11
I know these are different major versions but just wanted to point it out in case that helps!

[elielr01]

Forget about it guys, I just read the migration guide to v2, and apparently, now the type property is not a string anymore. You need to import the chart types that you want to use and call them in the type property.

The following actually works in billboard v2.1.1:

<template>
  <div id="line"></div>
</template>

<script>
export default {
  mounted() {
    const { bb, line } = require('billboard.js') // notice the import of the line type
    const chart = bb.generate({
      bindto: '#line',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ],
        type: line() // notice that this need to be called
      }
    })
  }
}
</script>

I would actually recommend to update the examples so that others don't face the same issue 😅

Sorry for the false alarm, guys!

[netil]

Hi @elielr01, added ESM usage example to the sample code for more clarity.