Billboard.js: $$.initClip is not a function

Created on 20 Jul 2020  路  2Comments  路  Source: naver/billboard.js

Description

I wanted to try billboard.js in my React code and in a very simplistic scenario (example copied from the website), I'm getting the following error:

billboard.esm.js:5035 Uncaught TypeError: $$.initClip is not a function
    at ChartInternal.initParams (billboard.esm.js:5035)
    at ChartInternal.init (billboard.esm.js:4983)
    at new Chart (billboard.esm.js:5752)
    at Object.generate (billboard.esm.js:10909)
    at eval (App.js? [sm]:8)

Steps to check or reproduce

Here's a CodeSandbox with a simple reproduction code:

https://codesandbox.io/s/loving-ganguly-q4us0?file=/src/App.js

Am I doing something obviously wrong here?

question

Most helpful comment

You need to specify explicitly data.type/data.types as you can read here: https://github.com/naver/billboard.js/wiki/Migration-Guide-to-v2#4-specify-datatypedatatypes-for-esm-import

Change your billboard import to:
import bb, {line} from "billboard.js";

and modify configuration to this (instead of line you can import other data type):

{
      data: {
        columns: [
          ["data1", 30, 200, 100, 400, 150, 250],
          ["data2", 50, 20, 10, 40, 15, 25]
        ],
        type: line()
      },
      bindto: e.current
}

All 2 comments

You need to specify explicitly data.type/data.types as you can read here: https://github.com/naver/billboard.js/wiki/Migration-Guide-to-v2#4-specify-datatypedatatypes-for-esm-import

Change your billboard import to:
import bb, {line} from "billboard.js";

and modify configuration to this (instead of line you can import other data type):

{
      data: {
        columns: [
          ["data1", 30, 200, 100, 400, 150, 250],
          ["data2", 50, 20, 10, 40, 15, 25]
        ],
        type: line()
      },
      bindto: e.current
}

Everything works now, thanks for the quick turnaround! I assumed that since I didn't use the previous versions, I'd be good to go by copying examples from the website :-)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AyshvaryaLaxmiK picture AyshvaryaLaxmiK  路  5Comments

elielr01 picture elielr01  路  3Comments

SoYoung210 picture SoYoung210  路  5Comments

matthiaskomarek picture matthiaskomarek  路  4Comments

imbyungjun picture imbyungjun  路  5Comments