title: SVG chart - how can i adjust the height of the svg so that all the labels automatically fit inside
body: <p>I have x amount of dates which i want to show on this graph, therefore to avoid overlapping labels i added a height increment for each label, however the incremented value pushes the label off the chart</p>
  
  <p><a href="http://jsfiddle.net/pjnyumsv/2" rel="nofollow noreferrer">http://jsfiddle.net/pjnyumsv/2</a></p>
  
  <pre><code>//Line 42 in the fiddle
  this.outerHeight = 100;
  
  //if i change this it just pushes the line down without adjusting the labels
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/wNUuz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wNUuz.png" alt="enter image description here"></a>
  i cant figure out how to get the last 2 labels to appear, ideally i would want the line chart to get pushed down, or better yet if there was a way of alternating the height of each label so it goes above and below the line.</p>