Column Chart Show datalabel for null values - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

Column Chart Show datalabel for null values

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//from w  w  w  .  j  a  va2s  .c o  m
  $('#container').highcharts({
    chart: {
      type: 'column',
      events: {
        load: function() {
          const categoryWidth = this.plotWidth / this.xAxis[0].categories.length;
          this.series[0].points.forEach(point => {
            if (point.y === null) {
              const offset = point.x * categoryWidth + categoryWidth / 2;
              const text = this.renderer.text('N/A', -999, -999).add();
              text.attr({
                x: this.plotLeft + offset - text.getBBox().width / 2,
                y: this.plotTop + this.plotHeight - 8
              });
            }
          })
        }
      }
    },
    title: {
      text: 'Historic World Population by Region'
    },
    subtitle: {
      text: 'Source: Wikipedia.org'
    },
    xAxis: {
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Population (millions)',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      }
    },
    legend: {
      layout: 'vertical',
      shadow: true
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Year 1800',
      data: [107, null, 635, 203, 2],
      dataLabels: {
        enabled: true,
        overflow: 'none',
        style: {
          fontSize: '13px',
          fontFamily: 'Verdana, sans-serif',
          fontWeight: 'normal',
          textShadow: '0'
        }
      }
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials