Show NO Data for null value in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

Show NO Data for null value in column chart

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="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
const data = [49.9, -1, 71.5, 106.4, -1, 129.2]
function renderLabels() {/*from   w w w.  j  av  a  2  s.  com*/
    this.series[0].points.forEach((point, i) => {
      if (point.isNull) {
        point.noDataLabel = this.renderer.text('No data', 0, -9e9).attr({
          rotation: 90,
          zIndex: 99
        }).add()
      }
    })
    redrawLabels.call(this)
}
function redrawLabels() {
  this.series[0].points.forEach(point => {
    if (point.noDataLabel) {
      point.noDataLabel.attr({
        x: point.series.group.translateX + point.plotX,
        y: this.plotTop + this.plotHeight - 80
      })
    }
  })
}
Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
          load: renderLabels,
          redraw: redrawLabels
        }
    },
    series: [{
        data: data.map(v => v === -1 ? null : v)
    }]
});

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

Related Tutorials