score:1

Accepted answer

You can dynamically do this with the load event of highcharts and annotations. Like this:

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,
            },
            labels: [{
              point: {
                x: i,
                y: 0,
                xAxis: 0,
                yAxis: 0
              },
              text: 'Your title here',
              shape: 'rect',
              style: {
                fontSize: '20px'
              }
            }]
          })
        }
      }
      this.redraw()
    }
  }
},

This will print a text for every position in the chart that does not have any values.

It is assumed that you have two series, both with null values where data is missing. After a point with no data is found an annotation is added in its place.

There are lots of options to play with, to style and position the annotation exactly as you wish.

This will only work if <script src="https://code.highcharts.com/modules/annotations.js"></script> has been included.

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 src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<div id="updown_chart">

</div>

Working jsfiddle example: http://jsfiddle.net/ewolden/p4e0m1w6/4/


Related Query

More Query from same tag