CODEWITHSUNDEEP
d3.js
ttmt
ttmt

Reputation: 4984

D3 - Position second x axis labels

I have a stackblitz here - https://stackblitz.com/edit/d3-stacked-trend-bar-positioned-months-1b93nz?file=src%2Fapp%2Fbar-chart.ts

I have a stacked bar chart using D3 in Angular.

I'm trying to position a second axis of labels on the x axis.

Currently I'm using the with of the graph but this means the labels dont line up correctly with the bars.

Is there a better D3 way to add these labels and positino them.

Upvotes: 0

Views: 468

Answers (1)

rioV8
rioV8

Reputation: 28633

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)");
    }

Upvotes: 1

Related Questions