Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.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>
<button id="add">Add data</button>
<button id="remove">Remove data</button>
<button id="showCustom">Show custom message manually</button>

JavaScript

var chart,
  btnRemove = $('#remove'),
  btnAdd = $('#add'),
  btnShow = $('#showCustom');

btnAdd.click(function() {
  chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1)); // Return random integer between 1 and 10.
});

btnRemove.click(function() {
  if (chart.series[0].points[0]) {
    chart.series[0].points[0].remove();
  }
});

btnShow.click(function() {
  if (!chart.hasData()) {
    chart.hideNoData();
    chart.showNoData("Your custom error message");
  }
});

chart = Highcharts.chart('container', {
  title: {
    text: 'No data in line chart - with custom options'
  },
  series: [{
    type: 'line',
    name: 'Random data',
    data: []
  }],
  lang: {
    noData: "no data to display"
  },
  noData: {
    style: {
      fontWeight: 'bold',
      fontSize: '15px',
      color: '#303030'
    }
  }
});