CODEWITHSUNDEEP
javascriptd3.js
Maihan Nijat
Maihan Nijat

Reputation: 9334

How to align y axis on right in D3.js bar chart?

const y1 = d3.scaleLinear().range([300, 0]);
y1.domain([0, 100]);
const yAxisRight = d3.axisRight(y1);

const yAxisRight_g = svgContainer.append('g')
  .attr('class', 'y axis right')
  .call(yAxisRight)
  .append('text')
  .attr('transform', 'rotate(-90)')
  .attr('transform', 'translate(600px, 0)')
  .attr('y', 6).attr('dy', '.71em');

I want to display the y-axis on the right instead of left. I used attribute transform to display it on the right but it does not work. I checked the DOM, and found the transform attribute it not added at all. It works, if I add transform translate attribute through browser inspector. I also tried adding CSS:

.right {
  transform: translate(600px, 0);
}

But it does fail.

Upvotes: 2

Views: 1237

Answers (1)

Maihan Nijat
Maihan Nijat

Reputation: 9334

const yAxisRight_g = svgContainer.append('g')
  .attr('class', 'y axis')
  .attr('transform', 'translate(' + (700) + ', 0)')
  .call(yAxisRight)
  .selectAll('text');

I was appending text and adding transform to it which did not work. Simply appended g/ group to the container and setting transformation.

Upvotes: 1

Related Questions