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'
   },
});

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. — George, Feb 17 '17 at 11:23
See example...http://jsfiddle.net/gh/get/jquery/2/highcharts/highcharts/tree/master/samples/highcharts/no-data-to-display/no-data-pie/ — Nitin Dhomse, Feb 17 '17 at 11:24
can we increase font size and we need to must add no-data-to-display-js file — Kondal, Feb 17 '17 at 11:29
@Kondal Can I know what extra details you require from existing answer. — Deep 3015, Aug 16 '17 at 05:34
if we have data still showing no data available message so,can we hide in highcharts if we have data — Kondal, Aug 16 '17 at 05:37
check this [noData](http://api.highcharts.com/highcharts/noData) from docs.This example works fine and tested. Add example where you fail — Deep 3015, Aug 16 '17 at 06:19

score 21 · Answer 1 · answered Feb 17 '17 at 11:43

21

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'
    }
});

answered Feb 17 '17 at 11:43

Talha Khan

219
1
4

Could we customize this message, like change color etc? – Hammad Sajid Jul 24 '19 at 06:45
3

for me it is not working, the chart is empty and the message is not displayed either – Patrik Laszlo Aug 12 '19 at 11:05

fustaki · Accepted Answer · 2017-02-17T12:51:08.737

15

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();

});

edited Feb 17 '17 at 12:51

answered Feb 17 '17 at 11:31

fustaki

1,574
1
13
20

The link is broken. – SovietFrontier Jun 14 '19 at 20:15
How that text would be center alighned? – Hammad Sajid Jul 23 '19 at 11:55

score 14 · Answer 3 · answered Jan 22 '18 at 15:42

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

apart from live example how your post differs from https://stackoverflow.com/a/42297065/8632727. It looks crazy — Patata, Feb 05 '18 at 06:04

score 8 · Answer 4 · answered Aug 17 '17 at 18:38

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

score 5 · Answer 5 · answered Aug 13 '19 at 06:34

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'
  }
});

score 2 · Answer 6 · answered Aug 14 '19 at 03:07

With the current version (v7.1.2) and connected no-data-to-display module (v7.1.2) you can show your 'no data' message when you create a chart object as Patrik said by setting lang.noData option.

To be able to change this message after the chart is created you need to call method

yourChartObject.showNoData('you new message')

score 0 · Answer 7 · answered Jul 31 '20 at 06:35

<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>

Highcharts.chart('container', {
    lang: {
        noData: "No data found"
    },
    noData: {
        style: {
            fontWeight: 'bold',
            fontSize: '15px'
        }
    },
    .
    .
});

score 0 · Answer 8 · answered Jan 10 '22 at 09:43

0

and then after series you should add:

 lang: {
    noData: 'Nessun dato presente'
 },
 noData: {
    style: {
         fontWeight: 'bold',
         fontSize: '15px',
         color: '#303030'
     }
},

and it will work just fine

answered Jan 10 '22 at 09:43

Julia

51
1
3

How to show No Data Available Message in highcharts

8 Answers8