Feature question - double lined x-axis legend

[hirschferkel]

Hi there,

ist it possible with billboard to create a double lined x-axis legend like in this example made with charts.js?
https://www.merics.org/en/china-monitor/content/5401#5406
Best, hirschferkel

[netil]

Hi @hirschferkel, just for now it doesn't have the support of multiple axes option.
But we have plan to implement on it (Ref. #98).

Just for now, you can implement another x axis manually.
I made an example to take in reference.

onrendered: function() {
	const h = this.height;
	let i = 0;
	const x2Axis = this.svg.select(".bb-axis-x2");
	
	// check more d3's axis API: https://github.com/d3/d3-axis#api-reference
	const x2 = d3.axisBottom(this.x)
		.ticks(24)
		.tickFormat(function() {
		    const quarter = ["Q1", "Q2", "Q3", "Q4"];
		
			return quarter[i++ % 4];
		});

	if (x2Axis.empty()) {
		setTimeout(() => {
			this.svg.attr("height", h + 50);
		
			// append new x2 axis
		        this.svg.select("g")
		            .append("g")
		            .attr("class", "bb-axis bb-axis-x2")
			    .style("shape-rendering", "crispEdges")
		            .attr("transform", `translate(0,${h + 25})`)
		            .call(x2);
	    }, 100);
	}
}

With above code, you'll get:

Checkout the online working demo:

• https://jsbin.com/muqedon/1/edit?html,js,output

[hirschferkel]

Thanks for this solution, that's what I was searching for.
All the best