Resizing a chart with huge legend draws the legend beyond the chart area

[creage]

Description

When a legend has too many items (like 20, 30 etc.) - resizing a chart doesn't calculate the position/dimensions of the legend correctly, drawing it outside of the chart container.

Steps to check or reproduce

• Go to https://naver.github.io/billboard.js/demo/#Chart.BarChart
• Replace the code with this:

var chart = bb.generate({
  data: {
    columns: [
	["data1", 30, 200, 100, 400, 150, 250],
	["data2", 30, 200, 100, 400, 150, 250],
	["data3", 30, 200, 100, 400, 150, 250],
	["data4", 30, 200, 100, 400, 150, 250],
	["data5", 30, 200, 100, 400, 150, 250],
	["data6", 30, 200, 100, 400, 150, 250],
	["data7", 30, 200, 100, 400, 150, 250],
	["data8", 30, 200, 100, 400, 150, 250],
	["data9", 30, 200, 100, 400, 150, 250],
	["data10", 30, 200, 100, 400, 150, 250],
	["data11", 30, 200, 100, 400, 150, 250],
	["data12", 30, 200, 100, 400, 150, 250],
	["data13", 30, 200, 100, 400, 150, 250],
	["data14", 30, 200, 100, 400, 150, 250],
	["data15", 30, 200, 100, 400, 150, 250],
	["data16", 30, 200, 100, 400, 150, 250],
	["data17", 30, 200, 100, 400, 150, 250],
	["data18", 30, 200, 100, 400, 150, 250],
	["data19", 30, 200, 100, 400, 150, 250],
	["data20", 30, 200, 100, 400, 150, 250],
	["data21", 30, 200, 100, 400, 150, 250],
	["data22", 30, 200, 100, 400, 150, 250],
	["data23", 30, 200, 100, 400, 150, 250],
	["data24", 30, 200, 100, 400, 150, 250],
	["data25", 30, 200, 100, 400, 150, 250],
	["data26", 30, 200, 100, 400, 150, 250],
	["data27", 30, 200, 100, 400, 150, 250],
	["data28", 30, 200, 100, 400, 150, 250],
	["data29", 30, 200, 100, 400, 150, 250],
	["data30", 30, 200, 100, 400, 150, 250],
	["data31", 30, 200, 100, 400, 150, 250],
	["data32", 30, 200, 100, 400, 150, 250],
	["data33", 30, 200, 100, 400, 150, 250],
	["data34", 30, 200, 100, 400, 150, 250],
	["data35", 30, 200, 100, 400, 150, 250],
	["data36", 30, 200, 100, 400, 150, 250],
	["data37", 30, 200, 100, 400, 150, 250],
	["data38", 30, 200, 100, 400, 150, 250],
	["data39", 30, 200, 100, 400, 150, 250],
	["data40", 30, 200, 100, 400, 150, 250]
    ],
    type: "bar", // for ESM specify as: bar()
  },
  bar: {
    width: {
      ratio: 0.5
    }
  },
  bindto: "#barChart_1"
});

• Try to resize window multiple times

Expected: Chart re-draws properly, according to window size
Actual: Sometimes legend overflows, leading to crops - on the screenshot below only first 31 legend items are drawn, the rest is not visible.

IMPORTANT: Redrawing the chart (destroying old one, and generating new) renders it as expected.

[creage]

@netil Any comments on that issue? Or maybe suggestions on how can we workaround it other than re-creating the widget entirely?

[netil]

Hi @creage, IMO there're 2 issues here.

• A. Buggy on determining legend area height during resize if has huge legend items.
• B. Even the first(A) issue solved, when the viewport narrowed down, the chart area will shrink. Hence the chart isn't visible, which isn't a proper way to visualize data.

My recommendation is, if need to deal huge legend items, try use of legend.template.
This will make chart visible in any circumstances, and also make legend to be visible correctly.

Here is the example:

• https://jsfiddle.net/netil/12nrm95e/

[creage]

@netil I just wonder why does re-creating of the chart renders both chart and legend as expected, and resize - breaks the rendering. Can we have that part fixed please?

I don't want to render the legend manually - it puts another effort for calculating the legend dims.