How can I bind at a later time a billboardjs chart?

The docs say that when the chart is not bound, it'll start observing the chart.element property. I've tried not setting the bindto property for the options object passed to generate, and also setting it to null. But if I later set the chart.element property to anything i.e. chart.element = document.getElementById("#chart-here"), nothing happens.

What is the correct approach of doing this? Or is it something that I misunderstood? Thanks.

Solution

You just need to use setTimeout https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

var generateChart = function () {
  bb.generate({
    data: {
      columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25]
      ]
    },
    bindto: "#chart-here"
  });
};
setTimeout(generateChart, 2000)

<title>billboard.js</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
Chart will appear in 2 seconds...
<div id="chart-here"></div>