score:3

Accepted answer

this has been added per the uservoice entry.

score:1

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.

score:1

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

score:22

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

Related Query

More Query from same tag