Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="height: 300px; margin-top: 2em"></div>

<button id="btn">Update label text</button>

JavaScript

/* var wrnLbl = [];
wrnLbl.push({
          html : 'Warning : Data is not accurate!',
          style : {
            left : '172px',
            top  : '52px',
            color : '#ff0202',
            fontWeight : '800'
          }
        }); */

var label;
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  label.attr({
    text: 'newText'
  });
});

var myChart = Highcharts.chart('container', {
  labels: {
    //    	items : [{
    //      	html : 'Warning : Data is not accurate!',
    //        style : {
    //        	left : '172px',
    //          top : '52px',
    //         color : '#ff0202',
    //          fontWeight : '900'
    //        }
    //      }]
  },
  chart: {
    zoomType: 'x',
    resetZoomButton: {
      relativeTo: 'pl',
      position: {
        // align: 'right', // by default
        // verticalAlign: 'top', // by default
        x: 0,
        y: -30
      }
    }
  },

  plotOptions: {
    series: {
      events: {
        afterAnimate: function() {
          var chart = this.chart;
          label = chart.renderer.text('Data is not accurate!',800, 168)
            .css({
              fontSize: '12px',
              color: '#ff0202',
              fontWeight: '900',
              zIndex : '100'
            })
            .add();
        }
      }
    }
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    gridLineWidth : 2,
    gridLineDashStyle : "solid",
    gridLineColor : '#E6E6E6'
  },
  yAxis : {
    gridLineWidth :2,
    gridLineDashStyle : "solid",
    gridLineColor : '#E6E6E6'
  },
  

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]

});

//myChart.update({labels : { items : wrnLbl}});