score:1

Accepted answer

Use the x-position of the bars and position the text in the middle of it.

  private drawBarTitle(data:any){
      this.chart.append('g')
        .attr("transform", "translate(" + 10 + "," + (this.height+10) + ")")
          .selectAll('g')
          .data(data)
          .enter()
          .append('g')
      .attr('transform', (d:any, i:any)=>{
        var x = this.x(d.date) + (i%2) * 0.525 * this.x.bandwidth();
        return "translate(" + (x + this.x.bandwidth()*0.95*0.25) + "," + 0 + ")"
      })

      .append('text')
      .text((d:any, i:any)=>{ return d.type; })
      .attr("dy", "-0.3em")
      .classed('trend-type', true)
      .style("text-anchor", "end")
      .attr("transform", "rotate(-90)");
    }

Related Query

More Query from same tag