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: ['#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: ]}
]
});
});
}); </pre>
<pre lang="HTML"><div id="c2449f32-a781-4a11-84e4-9eefa7b513bf" style="min-width: 17%; height: 300px; margin: _MARGIN_ auto"></div></pre>