No Data Found Message in Charts

[Jayesh Tiwari]

Hi,

Is there a way we can display a 'No Data Found' message in React Charts when the data is not present from the source. Right now, the charts renders and is blank/empty.

Many Thanks

[Swetha Babu]

Hi Jayesh,

Greetings from Syncfusion.

We can display the text based on your requirement by setting the content property in the annotation when the dataSource of the series is empty in the load event of the Chart. We have created a simple react application to demonstrate the same. Please find the below stackblitz link for your sample reference.

Sample link: https://stackblitz.com/edit/react-uxut8k?file=index.js

Code Snippet:

<AnnotationsDirective>

    <AnnotationDirective content="" x='50%' y='50%' coordinateUnits='Pixel' verticalAlignment='Top'>

    </AnnotationDirective>

</AnnotationsDirective>

                                                                                     

load(args) {

    for (var i = 0; i < args.chart.series.length; i++) {

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

            args.chart.annotations[0].content='<div id="chart_cloud">No Data Found</div>'

        }

    }

};

Screenshot:

In the above sample, we have rendered an annotation with empty content. We are checking whether the dataSource is empty in the load event by using the series in the chart argument. If the dataSource is empty, then we are setting the content of the annotation as No Data Found.

Kindly, revert us if you have any concerns.

Regards,

Swetha