title: Highcharts dataLabel overlap
body: <p>I have a highcharts stacked barchart that has a few values that are extremely low. This causes the two dataLabels to overlap, like this fiddle: <a href="http://jsfiddle.net/cerjps88/" rel="nofollow">http://jsfiddle.net/cerjps88/</a></p>
  
  <p>What is the best means to ensure that the labels can't overlap?</p>
  
  <p>Here's my highchart code:</p>
  
  <pre><code>function getCostStackedColumnChart(series) {
  
      function costFilterPluck(costCollection, propertyName) {
          return _.chain(costCollection)
                  .filter(function (f){
                      return Math.abs(f.metric_mean_patient_cost) &gt; 0 &amp;&amp; Math.abs(f.metric_mean_patient_cost_rx) &gt; 0
                  })
                  .pluck(propertyName)
                  .take(10)
                  .value();
      }
  
      function shapeCostData(costCollection) {
  
          return [
              {
                  name: 'RxCost Per Prescription',
                  color: '#1aadce',
                  data: costFilterPluck(series, 'metric_mean_patient_cost_rx')
              },
              {
                  name: 'Retail Price Per Prescription (2014)',
                  color: '#00FFFF',
                  data: costFilterPluck(series, 'metric_drug_price_rx')
              }
          ];
      }
  
      return {
          options: {
              chart: {
                  type: 'column'
              },
              tooltip: {
                  formatter: function () {
                      var format = d3.format(",.2f");
                      var chart = this.point.series.chart;
                      var index = chart.xAxis[0].categories.indexOf(this.x);
                      var series1 = this.point.series;
                      return '&lt;b&gt;' + this.x + '&lt;/b&gt;&lt;br/&gt;' +
                              series1.name + ': $' + format(this.y);
                  }
              },
              showInLegend: true,
              plotOptions: {
                  column: {
                      grouping: true,
                      stacking: 'normal',
                      dataLabels: {
                          enabled: true,
                          allowOverlap: false,
                          format: '${y:,.2f}',
                          color: (Highcharts.theme &amp;&amp; Highcharts.theme.dataLabelsColor) || 'black',
                          style: {
                              fontWeight: 'bold',
                              textShadow: '0 0 3px white'
                          },
                      }
                  }
              }
          },
          xAxis: {
              stackLabels: {
                  enabled: true,
                  style: {
                      fontWeight: 'bold',
                      color: (Highcharts.theme &amp;&amp; Highcharts.theme.textColor) || 'gray'
                  }
              },
              categories: costFilterPluck(series, 'aedrug_label'),
              title: {text: 'Drug'}
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Total Cost Per Prescription'
              }
          },
          tooltip: {
              shared: true
          },
          title: {
              text: drugGroupName + ' RxCost'
          },
          series: shapeCostData(series)
      };
  }
  </code></pre>