hide stack Label in column charts when it is bigger than the column - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

hide stack Label in column charts when it is bigger than the column

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="width:1000px; height: 400px; margin: 0 auto"></div> 
      <button id="btn"> Resize </button> 
      <script type="text/javascript">
document.getElementById('btn').onclick = function () {
  Highcharts.charts[0].setSize(500);//from  w  w  w  . j  a va2s.co m
};
function hideLabel() {
  const axis = this.yAxis[0];
  const stacks = axis.stacks.column;
  const pointWidth = this.series[0].points[0].shapeArgs.width;
  Object.keys(stacks).forEach(key => {
    const label = stacks[key].label;
    label.attr({
      visibility: label.getBBox().width > pointWidth ? 'hidden' : 'visible'
    });
  })
}
Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
          load: hideLabel,
          redraw: hideLabel
        }
    },
    plotOptions: {
      series: {stacking: 'normal'}
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            format: '{total} mm'
        }
    },
    series: [{
        name: 'John',
        data: [5000000, 300000, 4000000, 9000, 200000]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]
});

      </script>  
   </body>
</html>

Related Tutorials