How to use c3.js No data option

Question

I am trying to use no data option from c3.js but somehow it does not work for me.

My js fiddle: http://jsfiddle.net/ymqef2ut/7/

I am trying to use the empty option according to c3 documentation:

 empty: { label: { text: "No Data Available" }   }

Answer 1

There are two issues in your fiddle:

Problem1:

   data: {
        columns: [
            ['electricity plants', elec_plants],
            ['CHP plants', chp_planrs],
            ['Unallocated autoproducers / Other energy industry own use', auto_pro],
            ['Other', other_elec],
        ],
        type : 'pie'
    },
        empty: { label: { text: "No Data Available" }   },//this is wrong should be a part of data 

The empty should be a part of the data json like below

   data: {
        columns: [
            ['electricity plants', elec_plants],
            ['CHP plants', chp_planrs],
            ['Unallocated autoproducers / Other energy industry own use', auto_pro],
            ['Other', other_elec],
        ],
        type : 'pie',
        empty: { label: { text: "No Data Available" }   },//this is correct
    },

Problem 2: When data is not present the column array should be an empty array

var col5 = [];//set empty array
            if (resi || com || agri || other_sec){
                col5 = [['Residential', resi],
                        ['Commercial and public services', com],
                        ['Agriculture/forestry', agri],
                        ['Other', other_sec]]
            }
            //if all are 0 then col = []
            var chart = c3.generate({
                bindto: "#chart_5",
                data: {
                    columns: col5,
                    type: 'pie',
                    empty: {
                        label: {
                            text: "No Data Available"
                        }
                    }
                },       

Working code here

Testcase: Check for Iraq

Hope this helps!