The option to place the labels on the bottom

[jsong0605]

Description

AFAIK, the labels are rendered on the upper-side of the chart by default.
There's no option to manipulate the position of labels, so far.

The easiest way (but bothering ;() is increasing the 'y' value of element manually.
However, changing the 'y' value by hand may cause a blink.
Because, this re-rendering follows the default rendering on the default position.

I'd like to place the label on the bottom by handling the option which could be a solution to the above problem at the same time.

If you guys have a possible way, please add it to the following release.

I believe that there must be other users who seriously need it.

Thanks ~ :)

Steps to check or reproduce

        var chart = bb.generate({
            bindto: "#_temperature",
            interaction: {
                enabled: false
            },
            legend: {
                show: false
            },
            data: {
                x: "x",
                columns: [
                    ['x', 1, 2, 3, 4, 5],
                    ['data1', 7, 9, 13, 16, 20],
                    ['data2', 2, 2, 5, 7, 10]
                ],
                labels: true
            },
            axis: {
                x: {
                    show: false
                },
                y: {
                    show: false
                }
            },
            tooltip: {
                show: false
            },
            point:   {
                show: false
            }
        });

[netil]

@jsong0605 thanks for suggestion!
Actually there's no option for that, if you need to manipulate label text position, you should do handling directly.

For ex., below option will set text lower than the original position.

var chart = bb.generate({
	...
	onrendered: function() {
	        d3.selectAll(".bb-texts .bb-text").each(function() {
		        var text = d3.select(this);
		        text.attr("y", (+text.attr("y") + 20))
	        });
	}
});

We will take in considering for the next release. thanks!

[jsong0605]

I really appreciate your answer! ~ :)

As far as I'm concerned, the 'onrendered' function follows the default rendering on the default position.

So, the blicking problem still remains to be resolved.

Could I please have a solution for that matter, if you have one~ ?

[netil]

@jsong0605 you mean flickering of the text?

well, in that occasion to avoid flickering, set opacity to 0 for text nodes and re-set to 1 on onrendered callback.

.bb-texts text.bb-text {
     opacity: 0;
}

var chart = bb.generate({
	...
        onrendered: function() {
	    d3.selectAll(".bb-texts .bb-text").each(function() {
	      var text = d3.select(this);
	
	      text
	        .attr("y", (+text.attr("y") + 20))
	        .style("opacity", "1");
	    });
        }
});

Checkout the online demo :

• http://jsbin.com/jolote/edit?html,js,output

[jsong0605]

Yes, that's the issue what I meant.

Thanks for the detail solution to detour the issue. :)