Highchart does not show "no data to display" message

See more:

HighCharts

Hi All

I have implemented a highchart in my web applicaton. It works fine if there is data. But if there is no data it does not show the message "No data available"

anyone please help me.

My code returns below value

    $(function () { 
Highcharts.theme = {
colors: ['#cc0000','#38B6AB','#ff8000','#27ae60','#bf9393','#2c3e50','#7f8c8d','#2980b9','#6a5a8c','#e74c3c'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Arial","Arial","Arial"'
}
},
subtitle: {
style: {
color: '#666',
font: 'bold 12px "Arial","Arial","Arial"'
}
},
 legend: {
 itemStyle: {
font: '8pt "Arial","Arial","Arial"',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}   
}
};
Highcharts.setOptions(Highcharts.theme);       var chart; 
       $(document).ready(function() { 
            chart = new Highcharts.Chart({ 
                chart: { 
                    renderTo: 'c2449f32-a781-4a11-84e4-9eefa7b513bf',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie' 
                }, 
                title: { 
                    text:'', align: 'center', x: 0 
                }, 
                subtitle: { 
                    text: '' 
                }, 
                tooltip: { 
                    formatter: function() {return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +'%';} 
                }, 
                plotOptions: { 
                    pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '{point.percentage:.1f}%',color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',  style: { textShadow: 'none' } },  showInLegend: true,borderWidth: 0} 
                }, 
                xAxis: { 
                     
                }, 
                yAxis: [{ 
                     
                }], 
                credits: { 
                    enabled: false                }, 
                exporting: { 
                    enabled: true                }, 
                series: [ 
                    {type: 'pie',name: 'Revenue',data: ]} 
                ] 
            }); 
       }); 
    }); 

<div id="c2449f32-a781-4a11-84e4-9eefa7b513bf" style="min-width: 17%; height: 300px; margin: _MARGIN_ auto"></div>

What I have tried:

<pre lang="JavaScript"> $(function () {
Highcharts.theme = {
colors: [&#39;#cc0000&#39;,&#39;#38B6AB&#39;,&#39;#ff8000&#39;,&#39;#27ae60&#39;,&#39;#bf9393&#39;,&#39;#2c3e50&#39;,&#39;#7f8c8d&#39;,&#39;#2980b9&#39;,&#39;#6a5a8c&#39;,&#39;#e74c3c&#39;],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 0],
stops: [
[0, &#39;rgb(255, 255, 255)&#39;],
[1, &#39;rgb(240, 240, 255)&#39;]
]
},
},
title: {
style: {
color: &#39;#000&#39;,
font: &#39;bold 16px &quot;Arial&quot;,&quot;Arial&quot;,&quot;Arial&quot;&#39;
}
},
subtitle: {
style: {
color: &#39;#666&#39;,
font: &#39;bold 12px &quot;Arial&quot;,&quot;Arial&quot;,&quot;Arial&quot;&#39;
}
},
legend: {
itemStyle: {
font: &#39;8pt &quot;Arial&quot;,&quot;Arial&quot;,&quot;Arial&quot;&#39;,
color: &#39;black&#39;
},
itemHoverStyle:{
color: &#39;gray&#39;
}
}
};
Highcharts.setOptions(Highcharts.theme); var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: &#39;c2449f32-a781-4a11-84e4-9eefa7b513bf&#39;,plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: &#39;pie&#39;
},
title: {
text:&#39;&#39;, align: &#39;center&#39;, x: 0
},
subtitle: {
text: &#39;&#39;
},
tooltip: {
formatter: function() {return &#39;&lt;b&gt;&#39;+ this.point.name +&#39;&lt;/b&gt;: &#39;+ Math.round(this.percentage) +&#39;%&#39;;}
},
plotOptions: {
pie: {allowPointSelect: true,cursor: &#39;pointer&#39;,dataLabels: {enabled: true,format: &#39;{point.percentage:.1f}%&#39;,color: (Highcharts.theme &amp;&amp; Highcharts.theme.dataLabelsColor) || &#39;black&#39;, style: { textShadow: &#39;none&#39; } }, showInLegend: true,borderWidth: 0}
},
xAxis: {

},
yAxis: [{

}],
credits: {
enabled: false },
exporting: {
enabled: true },
series: [
{type: &#39;pie&#39;,name: &#39;Revenue&#39;,data: ]}
]
});
});
}); </pre>
<pre lang="HTML">&lt;div id=&quot;c2449f32-a781-4a11-84e4-9eefa7b513bf&quot; style=&quot;min-width: 17%; height: 300px; margin: _MARGIN_ auto&quot;&gt;&lt;/div&gt;</pre>