CODEWITHSUNDEEP
highcharts
Luis
Luis

Reputation: 2715

How to display No Data Available Message in highcharts

Can we display a message using highcharts, when the data set does not return any data? For example : "No Data Available"

Upvotes: 13

Views: 27794

Answers (4)

Cumulo Nimbus
Cumulo Nimbus

Reputation: 9685

A very simple example:

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

Upvotes: 1

Jacques LESCOT
Jacques LESCOT

Reputation: 329

It is now supported in Highcharts since v3.0.8

You need to load the no-data module and then, you can specify a custom message through the lang.noData option:

Highcharts.setOptions({lang: {noData: "Your custom message"}});

Upvotes: 22

QFDev
QFDev

Reputation: 8988

I used a little workaround to solve this problem. Basically I'm overlaying a div containing the message "No Data to Display".

.noChartData {
     display: hidden;         
     position: absolute;
     z-index: 99;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
     font-weight: normal;
     color: #CCC;
}

<div class="noChartData">No Data to Display</div>

When the page loads I'm using JQuery to find the position of the chart then offsetting the "No Data" div and revealing it accordingly.

var chartPosition = $("#myChart").position();
$(".noChartData").css("left", chartPosition.left + 400);
$(".noChartData").css("top", chartPosition.top + 150);

You'll need to vary the offsets accordingly depending on the size of your chart. I am using an AJAX call to pull in the series and category data so I know just before I bind the chart whether or not to reveal the floating "No Data" div.

Upvotes: 1

wergeld
wergeld

Reputation: 14442

This has been added per the uservoice entry.

Upvotes: 3

Related Questions