0

I have a bar chart with d3 which is https://jsfiddle.net/1e87abkz/

and to rotate the text I write 

.selectAll("text")  
            .style("text-anchor", "end")            
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform","rotate(-65)")
            .style("font-size","15px");

but in bottom some text cut of enter image description here please suggest how to fix this to visible all text .

kuntal
  • 1,591
  • 2
  • 16
  • 36

2 Answers2

1

Just increase your bottom margin to make enough room (line #65 in your fiddle):

var margin = { top: 20, right: 30, bottom: 120, left: 40 },
Rahel Lüthy
  • 6,837
  • 3
  • 36
  • 51
1

Increase the height of your svg to make it visible.

<svg id="graph" style="height:700px"></svg>

you can also make your svg responsive, see the questions below to do that.

Resize svg when window is resized in d3.js

Whats the best way to make a d3.js visualisation layout responsive?

Community
  • 1
  • 1
smali
  • 4,687
  • 7
  • 38
  • 60