Display "No data" message on donut chart when datasource is empty

[Idrish Laxmidhar]

Hello,

We are using the syncfusion donut chart https://ej2.syncfusion.com/javascript/documentation/accumulation-chart/pie-dough-nut/

So if the datasource is empty, the chart area appears blank. We are looking to display some message to the UI such as "No data to display chart". Can you help us.

[Durga Gopalakrishnan]

Hi Idrish, 

Greetings from Syncfusion. 

We suggest you to include HTML DIV to show the custom message and load event to cancel chart rendering when series datasource is empty. In the sample, we have displayed DIV when data is empty and hidden the DIV when data is available. Please check with below snippet and sample. 

<div id="rect" class="rectangle" style="display:none;margin:20px">No Data</div> 

public load(args: IAccLoadedEventArgs): void { 

        var rectEle = document.getElementById("rect");    

        var pie = document.getElementById("container");         

       if(args.chart.series[0].dataSource["length"] == 0){             

            args.cancel = true; 

            pie.style.display = 'none'; 

            rectEle.style.display = 'block'; 

       } 

       else{ 

            rectEle.style.display = 'none'; 

       } 

    }; 

 

Sample : https://stackblitz.com/edit/angular-pbjpwa-hgu7wm 

Please revert us if you have any concerns. 

Regards, 

Durga G