We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Display message "No data". Can I it?

When I create a chart and there is no data to display how do I get a "No data to display" message directly in the chart without having to create a custom solution? Thank you

1 Reply

HM Hemalatha Marikumar Syncfusion Team November 11, 2019 11:18 AM UTC

Hi Gianfranco, 
Greetings from Syncfusion. 
We would like to let you know that currently there is no direct property to achieve your requirement, but you can achieve this using the TextAnnotation and set its X1 and Y1 properties using the SeriesClipRect in SizeChanged event. 
You can set the text as what you want if the data count is less than zero otherwise set as null to hide the text annotation when you populate the data. Please refer to the code below. 
Code snippet[XAML]: 
<syncfusion:SfChart SizeChanged="Chart_SizeChanged" x:Name="chart" > 
    <syncfusion:CategoryAxis Visibility="{Binding AxisVisibility}"/> 
    <syncfusion:NumericalAxis Visibility="{Binding AxisVisibility}"/> 
.  .  . 
    <syncfusion:TextAnnotation x:Name="textAnnotation" Text="{Binding AnnotationText}" CoordinateUnit="Pixel" FontStyle="Normal" FontSize="20"/> 
Code snippet[C#]: 
private void Chart_SizeChanged(object sender, SizeChangedEventArgs e) 
    var rect = (sender as SfChart).SeriesClipRect; 
    textAnnotation.X1 = rect.Width / 2; 
    textAnnotation.Y1 = rect.Height / 2; 
Code snippet[C#]: 
public class ViewModel 
    public ViewModel() 
        Data = new ObservableCollection<Person>();   
        if (Data.Count <= 0) 
            AnnotationText = "No data to display"; 
            AxisVisibility = Visibility.Collapsed; 
            IsVisible = false; 
            AnnotationText = null; 
            AxisVisibility= Visibility.Visible; 
            IsVisible = true; 
Please get back to us if you have any questions on this. 
Hemalatha M. 

Live Chat Icon For mobile
Up arrow icon