Missing bottom padding for gauge charts legend

[RonnyWeiss]

Hello

When using Gauges with Legends then therese no padding at the bottom of the legend. The others charts types have the padding at the bottom.

Gauge:

Line:

Would be very cool if you could fix that.

Kind regards and a nice weekend

Ronny

[watnab]

billboard.js/src/internals/ChartInternal.js

Lines 936 to 938 in b929b98

	} else if (target === "legend") {
	x = $$.margin3.left;
	y = $$.margin3.top + (hasGauge ? 10 : 0);

[michkami]

billboard.js/src/internals/ChartInternal.js

Lines 936 to 938 in b929b98

	} else if (target === "legend") {
	x = $$.margin3.left;
	y = $$.margin3.top + (hasGauge ? 10 : 0);

This code is my fault. I added it to create a gap between legend and gauge labels, as there was no padding between them.
As far I can see 10 pixel seem to be too much, it should be rather 4 pixel (same as between gauge label and gauge) gap to make it look more symetric.

I actually don't think that the legend is the only problem for the missing padding at the bottom of the chart.
If you remove + (hasGauge ? 10 : 0) there will be bottom padding if the legend is enabled and positioned at the bottom, but if you set legend_show = false or/and gauge_labels_show = false } gauge still won't have padding at the bottom.

By removing + (hasGauge ? 10 : 0) you can see, that the legend container does not render at the end od the gauge label container but in the middle of them.

The reason for this could be that the starting y coordinate for gauge labels is placed in the arc (not outside like you can see in the screenshot below) and is than moved by

billboard.js/src/shape/arc.js

Line 843 in b929b98

.attr("dy", "1.2em")

to the final position under the arc.

But as I wrote above, adding margin to the legend won't fix the issue for all use cases.

[watnab]

It seems g.bb-chart-arc(the content of g.bb-chart) of the gauge should be a bit smaller.
However I could not find which function calculate the height.



I added the red border to the svg element.

[michkami]

@watnab gauge height is calculated here:

billboard.js/src/internals/ChartInternal.js

Lines 535 to 541 in b929b98

	// for arc
	$$.arcWidth = $$.width - ($$.isLegendRight ? legend.width + 10 : 0);
	$$.arcHeight = $$.height - ($$.isLegendRight ? 0 : 10);
	if ($$.hasType("gauge") && !config.gauge_fullCircle) {
	$$.arcHeight += $$.height - $$.getGaugeLabelHeight();
	}

I tried few things and got following results:

Description	Single	Multi
Labels: true && Legend: bottom
Labels: true && Legend: right
Labels: false && Legend: bottom
Labels: false && Legend: right
Labels: false && Legend: false

I removed + (hasGauge ? 10 : 0) from:

} else if (target === "legend") {
	x = $$.margin3.left;
	y = $$.margin3.top;
}

I added following function to arc.js:

getPaddingBottomForGauge() {
	const $$ = this;
	const defaultGaugeLabelHeight = 20; // value returned by 'getGaugeLabelHeight' if 'label_show: true'
	const legendShow = $$.config.legend_show;
	const gaugeLabelShow = $$.config.gauge_label_show;

	if (legendShow && gaugeLabelShow) {
		return $$.getGaugeLabelHeight() * ($$.isLegendRight ? 1.5 : 1);
	} else if (legendShow && !gaugeLabelShow) {
		return defaultGaugeLabelHeight * 1.5;
	} else if (!legendShow && gaugeLabelShow) {
		return $$.getGaugeLabelHeight() * 1.5;
	} else {
		return defaultGaugeLabelHeight * 1.5;
	}

changed the arcHeight calculation to this:

$$.arcHeight = $$.height - ($$.hasType("gauge") ? $$.getPaddingBottomForGauge() : ($$.isLegendRight ? 0 : 10));

It works for all gauge types, and it's only breaking 1 gauge test which can be easily updated.

If this solution is ok for @netil I could make a pull request.

[netil]

@michkami, can you make PR to v2 branch?

[netil]

From the PR (the right screenshot), will make have padding at the bottom.

But after the update, size of the gauge itself will become more smaller than before.
The differences can be compared with the screenshot.

• left: current / right: PR update

[RonnyWeiss]

I think this is ok! Another solution would be to position the legend more to the value title so gauge does not get smaller. But this is up to you how you handle that. The current workaroud of mine was also to make the gauge little bit smaller in the height and to put a small padding outside of the svg

[michkami]

I think this is ok! Another solution would be to position the legend more to the value title so gauge does not get smaller. But this is up to you how you handle that. The current workaroud of mine was also to make the gauge little bit smaller in the height and to put a small padding outside of the svg

Positioning the legend closer to value would overlap gauge min and gauge max as you can have multiple data columns:

@netil I think it is necessary to make the gauge a bit smaller, as the gauge and the legend are rendered into the same container.

[RonnyWeiss]

Yes you're right! So making the gauge smaller would be the best solution! Thank you very much for fixing that!

Kind regards

Ronny

[netil]

thanks @RonnyWeiss, @michkami for the contribution!
The changes will be in the next RC(next) release. :)