Billboard.js get chart object using bb.instance via chart name (id)

Question

I am using Billboard.js and displaying multiple charts using bb.generate. Everything is working fine, I can get a chart object using bb.instance[somenumber]. This will get me a Billboard chart based on which number I give, respective to the order in which the charts were made using bb.generate. This works usually, except for cases when I'd like to grab a specific chart based on it's bindto, or the id associated with the div that is being used for bb.generate. Example below:

//chart gen
bb.generate({
      data: this.data,
      ...
      bindto: '#chartName', // --> This is what I want to grab a bb.instance by
    });

//html side:
<div id="chartName"></div>

// what I'd like to do:
var chart = bb.instance(#chartName); //or something like this 
chart.load(...)

//INSTEAD OF

var chart = bb.instance[0];
chart.load(...)

Is this possible? I'd like to have this functionality to easily grab separate chart instances and mess with them with ease, without having to worry about it's numbered order in the bb.instance array.

I have already investigated a few different ways to do this to no avail. The closest I can get to grabbing it is by going through the Chart object there is a private _groups object buried in Chart.$.chart._groups[0][0].id, which TypeScript is not very fond of (saying it doesn't exist).

Thank you in advance!

score 0 · Answer 1 · answered Feb 14 '23 at 05:30

If chart bound eleements has id attribute, which can be identified each of them, making some helper function will help.

function getInstanceById(id) {
    return bb.instance.filter(v => v.$.chart.attr("id") === id)[0];
}

// will get chart instance bound to the <div id="chart">
getInstanceById("chart").load( ... );

Billboard.js get chart object using bb.instance via chart name (id)

1 Answers1