How to show No Data Available Message in highcharts

Question

Can we show a message using highcharts.When the data is not available? we have to show a message Example : No Data Available. If we have data hide : No Data Available message . in highcharts dynamically

  Highcharts.chart('container', {
  chart: {
     type: 'bubble',
     plotBorderWidth: 0,
     zoomType: 'xy'
   },
});

Solution 1

You can use Highcharts Chart Renderer

Here's an example in JSFiddle

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: []
}, function(chart) { // on complete
    chart.renderer.text('No Data Available', 140, 120)
        .css({
            color: '#4572A7',
            fontSize: '16px'
        })
        .add();
});

Solution 2

Include no-data-to-display.js file in your page. It comes bundled with highcharts. You can get it here otherwise: https://code.highcharts.com/modules/no-data-to-display.js

Default message is "No data to display". If you would like to modify it, you can do this:

Highcharts.setOptions({
    lang: {
        noData: 'Personalized no data message'
    }
});

Solution 3

Some of these other answers seem kind of crazy... here's a super basic solution I wanted to share:

Highcharts.setOptions({lang: {noData: "Your custom message"}})
var chart = Highcharts.chart('container', {
    series: [{
        data: []
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div id="container" style="height: 250px"></div>

Hope this helps someone

Solution 4

Based on your comment (if we have data still showing no data available message so,can we hide in highcharts if we have data).I think you are using fustaki's solution and don't want to use no-data-to-display.js module. Yes there is problem as mentioned .You can still use the same code by modifying it i.e add condition inside continuing function to check if series is empty or not, based on this render message.

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: []
}, function(chart) { // on complete
  if (chart.series.length < 1) { // check series is empty
    chart.renderer.text('No Data Available', 140, 120)
      .css({
        color: '#4572A7',
        fontSize: '16px'
      })
      .add();
  }
});

Fiddle demo

Solution 5

For me with latest version it works like this:

const Highcharts = require('highcharts');
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
NoDataToDisplay(Highcharts);
Highcharts.setOptions({
  lang: {
    noData: 'No data is available in the chart'
  }
});

View more solutions

Comments

[George]

Well yes. Just don't create the highchart and insert text saying "No Data Available". Without any code, this is the most help you're likely to get.

[Nitin Dhomse]

See example...jsfiddle.net/gh/get/jquery/2/highcharts/highcharts‌​/tree/master/…

[Kondal]

can we increase font size and we need to must add no-data-to-display-js file

[Deep 3015]

@Kondal Can I know what extra details you require from existing answer.

[Kondal]

if we have data still showing no data available message so,can we hide in highcharts if we have data

[Deep 3015]

check this noData from docs.This example works fine and tested. Add example where you fail

[Patata]

apart from live example how your post differs from stackoverflow.com/a/42297065/8632727. It looks crazy

[SovietFrontier]

The link is broken.

[Hammad Sajid]

How that text would be center alighned?

[Hammad Sajid]

Could we customize this message, like change color etc?

[Patrik Laszlo]

for me it is not working, the chart is empty and the message is not displayed either