onrendered event not (immediately) fired after resize

[tjohannto]

I am using the chart onrendered event to create a custom legend including values and ratios for Pie-charts.
These charts are exported to PDF/PNG or PPTx using canvg. For this export the charts are upscaled to a higher resolution than used on screen. During this upscaling via bb.resize() the onrendered event does not seem to be fired immediately. Then the legend looks odd ;)

If have created a fiddle to show the issue:
https://jsfiddle.net/c3egh71u/
(click export to canvas)

Is there any way to prevent this or a better (and working) solution?

[netil]

Hi @tjohannto

One of the possibility to apply is turn off the animation by:

  transition: {
    duration: 0
  },

And to make a customized legend, legend.contents.template looks more adequate, because you can make your own legend. Also, consider using .export() API to export as image.

[tjohannto]

This does not work within my example.
updated: https://jsfiddle.net/c3egh71u/23/
I have tried using the config option in bb.generate() as well as bbChart.config('transition_duration', 0);
I wanted to avoid the usage of custom legends because this would lead to a massive redesign of the current dashboards, but I'll have a look now.
.export() is worth having a look though. are custom legends included in .export()?

thank you.

[netil]

I haven't looked in very detail, try modifying redrawLegend() and add it as the .load() done option.

for (var i = 0; i < columns.length; i++) {
  if (i > 0) {
    setTimeout(function(column) {
      chart.load({
        columns: [
          columnData[column],
        ],
	done: redrawLegend
      });
    }, (i * 5000 / columnData.length), i);
  }
}

function redrawLegend() {
	chart.$.legend.selectAll("text")
		.filter(function() {
			return !this.querySelector("tspan");
		})
		.each(function() {
			const [id, value, ratio] = this.innerHTML.split(';');

			this.innerHTML = `
				<tspan class='id-row' text-anchor='start'>${id}:</tspan>
				<tspan class='value-row' x='100' text-anchor='end'>${value} = </tspan>
				<tspan class='ratio-row' x='130' text-anchor='end'>${ratio}</tspan>`;

			this.parentNode.querySelector("rect").setAttribute("width", 190);
  		});
  }

[tjohannto]

thx @netil
The issue is not on loading but on resizing. After calling chart.resize({height: 800, width: 1200}); I clone the svg node for export. This cloning (var svgEl = d3.select(svgContainer).select('svg').node(); var svgCopyEl = svgEl.cloneNode(true);) is done after calling the resize() function and in C3js this did work, but not in BBjs.

well, the workaround is to call the redrawLegend() function directly after calling resize()

[netil]

@tjohannto, added new feature to export image as desired size.
So, there's no need to clone the node and doing export image process via canvas.

chart.export({
    width: 1200,
    height: 800
});
// will return image dataURL string

To use new feature, it needs to install next v3 version (v3 needs d3.js v6)

# install the next tagged version
npm i billboard.js@next