Legend bindto page element throws error

[KindarConrath]

Description

The Tooltip.TooltipTemplate example shows how you can bind the tooltip to an HTML element outside the chart.
I was hoping to put my legend above the chart, but that is not an option, so I tried to bind the legend to an element above the
graph similar to how the TooltipTepmlate example did with the tooltip. This resulted in the following error message: Uncaught TypeError: Cannot read properties of null (reading 'selectAll')

Is there a way to put the Legend above the graph or to successfully attach it to an external element without causing errors?

Steps to check or reproduce

[netil]

Hi @KindarConrath, can you provide reproducible code?

[KindarConrath]

If we use the TooltipTemplate example here: https://naver.github.io/billboard.js/demo/#Tooltip.TooltipTemplate
and replace a little bit of the code, (I will give the full code replacement for simplicity)

// for ESM environment, need to import modules as:
// import bb, {line} from "billboard.js";


var chart = bb.generate({
  data: {
    columns: [
	["data1", 120, 200, 300, 100, 150, 250],
	["data2", 250, 129, 217, 240, 315, 225],
	["data3", 100, 320, 210, 340, 215, 125]
    ],
    type: "line", // for ESM specify as: line()
  },
  legend: {
    contents: {
      bindto: "#tooltip",
    }
  },
  bindto: "#tooltipTemplate"
});

you will see it fail with the same error.

[netil]

@KindarConrath
The legend.contents.bindto option should be used in conjunction with the legend.contents.template option also.
Is for telling how the legend items will be rendered.

  legend: {
    contents: {
         bindto: "#tooltip",
	 template: "<span style='color:#fff;padding:10px;background-color:{=COLOR}'>{=TITLE}</span>"
    }
  },

I'll be adding more detailed description on API doc.