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)
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?
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 :-)
Most helpful comment
You need to specify explicitly
data.type/data.typesas you can read here: https://github.com/naver/billboard.js/wiki/Migration-Guide-to-v2#4-specify-datatypedatatypes-for-esm-importChange your billboard import to:
import bb, {line} from "billboard.js";and modify configuration to this (instead of line you can import other data type):