javascripthighchartsno-data

How to show No Data Available Message in highcharts


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

Solution

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