adding legend.item.padding option

[tjohannto]

Description

I am currently checking to migrate to bildboard.js from c3.js. I have a feature request for an additional config parametre. I use heavily customized pie charts (more to come later ;)) with a higher number of pie elements (up to 25). When heaving 25 elements and showing the legend I need a smaller "padding" between the pie-legend elements. Currently in billboard.js (as it also has been in C3) the item height is calculated by the box.height adding fixed 4 pixels.

in updateLegendElement: function updateLegendElement(targetIds, options) Line 5107 in billboard.js: itemHeight = box.height + 4,

Steps to check or reproduce

I would suggest to add a padding parameter to the config object like this:

bb.generate({
	bindto: d3ChartSelection.node(),
	data: {
		...
	},
	legend: {
	..
		item: {
		...
		    padding: 0 /*px*/
		}...
	}
});

[netil]

@tjohannto, the current default legend element stays within chart <svg> element, and in a situation where legend item occupies bigger portion, the pie area needs to shrink and this dimensional calculation will impact whole rendering process.

Using the below screenshot example, how will be applied for when paddingTop > 300px? Maybe silly, but it needs to consider those possibilities also.

So, if needs customize legend element, recommend to use legend template option, where legend can be fully manipulated without any limitation.

[tjohannto]

I was just referring to itemHeight = box.height + 4 inside of updatePositions = function (textElement, id, index). Sorry, I should have made that more clear. The idea was to be able to change the + 4 to a configurable value, as in some occasion I simply need less space between the legend items.

[netil]

Simply, providing an configurable option for paddingTop, will not fulfill your needs. Just simply updating paddingTop=100, will looks like:

The paddingTopvalue should be affecting with the other related legend item's position helper functions to work as "padding" option.

• https://github.com/naver/billboard.js/blob/master/src/ChartInternal/internals/legend.ts#L562-L569

[tjohannto]

Well, in my current enviromnent with v3.0.3, I simply remove the +4 to consume less space (with legend position on the right). This fulfills my needs, but I thought it might be a reasonable idea to make this +4 a configurable option. Seems there is a paddingTop value now. I'll check how far I can get with this.

[netil]

I'll dig more in detail if there's way to provide as a generalized "padding" option.