CODEWITHSUNDEEP
highchartsexportlabel
ellier7
ellier7

Reputation: 427

Highcharts exporting hide data labels if number doesn't fit in stacked bar

I am working with highcharts and would like to disable datalabels on the main graph, but show them in the exported graph. However, if the data is smaller than a certain number, I would like to hide the labels in exported graph as well. I have seen this post on how to manage which datalabels are shown according to height: Highcharts stacked bar chart hide data labels not to overlap. However, I am not sure how to show certain datalabels only in the exported graph. This is my graph: https://jsfiddle.net/er1187/nbjh5jz3/ When I export, I want to hide these datalabels that are not showing properly: enter image description here

I tried using overflow and crop but was unable to fix the appearance so I would like to hide them.

plotOptions:{
  series: {
    dataLabels: {
      enabled: true,
      inside: true,
      allowOverlap: false,
      crop: true,
      overflow: 'none',
    }
  }
}

Upvotes: 2

Views: 1942

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

Fiddle demo with reference of this post. this is one type of hack with dataLabels formatter and load event

Highcharts.setOptions({ // Apply to all charts
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'bar',
    events: {
      load: function() {
        var chart = this;

        $.each(chart.series, function(i, serie) {
          $.each(serie.data, function(j, data) {

            if (data.yBottom - data.plotY < 15) data.dataLabel.hide();
            //
          });
        });
      }
    }
  }
});

Highcharts.chart('container', {
  exporting: {
    chartOptions: {
      legend: {
        enabled: false,
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          dataLabels: {
            inside: true,
            enabled: true,
            style: {
              fontSize: '5px',
              textOutline: 'none'
            },
            formatter: function() {
              return Highcharts.numberFormat(this.y, 1)
            }
          }
        }
      }
    }
  },

  plotOptions: {
    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        formatter: function() {
          return ''
        }
      }
    },

  },

  series: [{
    name: 'one',
    data: [5.24957, -1.636452, 5.511623, -5.797109, 6.975687, 4.622862, 2.902466, 3.992426, -0.270407, 3.184849, 12.249839]
  }, {
    name: 'two',
    data: [-1.311533, 2.508312, .97956, -1.725764, 5.177992, 2.1262, 5.41721, 53.811967, 4.060668, -1.317636, 13.763589]
  }]
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Update

Above example work on all formats except PDF when using Client side export

Fix with threads from post Instead of hiding labels, destroy them when loading 

Highcharts.setOptions({ // Apply to all charts
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'bar',
    events: {
      load: function() {
        var chart = this;

        $.each(chart.series, function(i, serie) {
          $.each(serie.data, function(j, data) {
            if (data.yBottom - data.plotY < 15) data.dataLabel = data.dataLabel.destroy();
            //
          });
        });
      }
    }
  }
});

Upvotes: 1

Related Questions