piechart legend/label enhancement

[tjohannto]

Would it be possible to add these features I added here (pie label background, bounding rect and custom legend using name, ratio and value):

https://jsfiddle.net/rxj70uka/

to the piecharts manually "onrendered"?

Or is there a smarter and less "costly" or more elegant way to have this features using BB?

p.s. feel free to use anything of this code as you like.

[michkami]

Actually, it would be nice to have label backrounds in all chart types.

We are rendering background labels in {{onrendered}} for all types being usable in "Combination Chart" (area, bar, line etc.). The problem is that the background rects have to wait for the text transition to end, so that the texts are moved first and immediately after the transition ends, the background rects are transitioning to the new position.

By implementing the background rects functionality directly into billboard, it would be possible that the texts and the backgrounds would use the same transition.

[netil]

@tjohannto @michkami,

using svg <filter> can make texts to have backgrounds.

onafterinit: function() {
	const backgroundColor = "red";
	const defs = this.internal.$el.defs || this.internal.$el.svg
		.insert("defs", ".bb-main");

	defs.append("filter")
		.attr("x", 0)
		.attr("y", 0)
		.attr("width", 1)
		.attr("height", 1)
		.attr("id", "bg")
		.html(`<feFlood flood-color="${backgroundColor}" />
			<feComposite in="SourceGraphic"/>`);

	this.$.text.texts.attr("filter", "url(#bg");
}

Adding as new option might facilitate the process.

data: {
    labels: {
        backgroundColor: "red",

        // or specify colors by data series
        backgroundColor: {
                data1: "red",
                data2: "blue"
        }
    }
}

[tjohannto]

data.labels.backgroundColor and data.labels.format does not seem to apply to pie charts, right?

[netil]

@tjohannto, it works for all type of shapes.

There was a typo from API doc omitting last s (it should be "backgourndColors" not "backgroundColor")