D3 grouped bar chart: How to rotate the text of x axis ticks?
A reasonable solution can be found here
The result looks like this:
Make sure you fully understand this portion of code:
svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)");
-65 is the angle the label text is rotated, in degrees.
Also, you should increase margin at the bottom, so that the rotated text doesn't get clipped.
WARNING: Rotated text is inevitably rendered by browsers at the end (D3 just creates appropriate svg that is interpreted by browsers), and they do a lousy job rendering rotated text (as opposed to lets say advanced drawing or diagramming software).
Also, related StackOverflow questions:
You might want to consider using D3FC, which has a drop-in replacement for the D3 axis component that supports this feature.
D3FC has an adapter component that will automatically rotate axis labels if they collide:
const axis = fc.axisLabelRotate(fc.axisOrdinalBottom(foodScale));
Here it is in action:
Full disclosure - I am a maintainer and contributor to the D3FC library!