show blank column with text in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

show blank column with text in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>HightChart Blank Colunm Title</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/* w ww  .ja  v a 2 s  .c o m*/
var investment = 10000;
Highcharts.chart('updown_chart', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        for (let i = 0; i < this.series[0].data.length; i++) {
          if (this.series[0].data[i].y == null && this.series[1].data[i].y == null) {
            this.addAnnotation({
              labelOptions: {
                backgroundColor: 'rgba(255,255,255,0.5)',
                borderWidth: 0,
                verticalAlign: 'top',
                y: 0
              },
              labels: [{
                point: {
                  x: i,
                  y: 0,
                  xAxis: 0,
                   yAxis: 0
                },
                text: 'Your title here',
                shape: 'rect',
                style: {
                   fontSize: '20px'
                }
              }]
            })
          }
        }
        this.redraw()
      }
    }
  },
  xAxis: {
    categories: ['pa', 'p2', 'p3', 'p4'],
    reversed: false,
    labels: {
      step: 1
    }
  },
  yAxis: [{
    title: {
      text: null
    },
    labels: {
      formatter: function() {
        return this.value + '%';
      }
    },
    stackLabels: {
      enabled: true,
      align: 'center',
      formatter: function() {
        var newval = this.total;
        var pval = Math.abs(this.total);
        var amount = parseInt((investment * pval) / 100);
        if (this.isNegative) {
          newval = '-' + pval + '%' + ' ($' + amount + ')';
        } else {
          newval = '+' + pval + '%' + ' ($' + amount + ')';
        }
        return newval;
      }
    }
  }],
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.point.category + '</b><br/>' +
        this.series.name + ': ' + Highcharts.numberFormat(this.point.y, 2) + '%';
    }
  },
  credits: {
    enabled: false
  },
  series: [{
    showInLegend: false,
    name: 'aa',
    color: '#428bca',
    data: [10, 20, 10, null]
  }, {
    showInLegend: false,
    name: 'bb',
    color: '#15315A',
    data: [-10, -20, -30, null]
  }],
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/modules/annotations.js"></script> 
      <div id="updown_chart"> 
      </div>  
   </body>
</html>

Related Tutorials