title: highcharts responsive datalabels display
body: <p>Is there any way to set the dataLabels of the highcharts to not overlap for smaller sizes?</p>
  
  <p>I have a chart which is <a href="http://jsfiddle.net/elsevero/29XhX/43/" rel="nofollow">similar to this one</a> but what I'd like to achieve is:</p>
  
  <ul>
  <li>alternate the Y values (data Labels: 15, 40, and so on.)</li>
  <li>avoid text overlapping, instead of number I have: "Long text" which overlaps at iPhone size</li>
  </ul>
  
  <p>Is there any other option without specifying the <code>x</code> and <code>y</code> position of the <code>dataLabels</code>?</p>
  
  <pre><code>{
    "x": 1400457600000,
    "y": 15,
    "dataLabels": {
        "x": 25,
        "y": -5,
        "style": {
           "color": "#000000"
        }
     }
  }
  </code></pre>