I am facing problem with - Error: attribute r: Expected length, "NaN" using Billboard js chart

Question

I am try to display a billboardjs bubble chart using javascript and html.

I included the lib in my index.html file as: src="/lib/billboard.pkgd.js"

The codes are very simple but when ran, I got the "NaN" error.

this.d3Chart = bb.generate({
    bindto: "#d3bubbleChart",
    data: {
      type: "bubble",
      label: false,
      xs: {
        data1: "x1",
        data2: "x2"
      },
      columns: [,
        ["x1", 10, 20, 50, 100, 50],
        ["x2", 30, 40, 90, 100, 170],
        ["data1", [20, 50], [30, 10], [50, 28], [60, 70], [100, 80]],
        ["data2", [350, 50, 30], [230, 90], [200, 100],[250, 150],[200, 200]]
      ]
    },
    bubble: {
      maxR: 50
    },
    grid: { y: { show: true } },
   
    axis: {
      x: {
        label: { text: "AOV", position: "outer-left"},
        height: 50,
        tick: { format: function(x) { return ("$"+x);}}
      },
      y: {
        fit: false,
        min: {fit: true, value: 0},
        max: 450,
        labels: "yes",
        label: { text: "Conversion Rate", position: "outer-bottom"},
        tick: { format: function(x) { return (x+"%");}}
      }
    }
  });

score 0 · Answer 1 · answered Feb 14 '23 at 09:25

Checkout the allowed data for bubble type from API doc:

For 'bubble' type, data can contain dimension value:
 - an array of [y, z] data following the order
 - or an object with 'y' and 'z' key value
   'y' is for y axis coordination and 'z' is the bubble radius value

I'm seeing from your example, that the first data of data2 contains additional value. Removing that will work fine.


this.d3Chart = bb.generate({
    data: {
      ...
      columns: [,

        // the length for each bubble should be 2
        ["data2", [350, 50, 30], ...]
      ]

I am facing problem with - Error: attribute r: Expected length, "NaN" using Billboard js chart

1 Answers1