Customize "No Data" message in RadCartesianChartView

[Ilya]

Hi!

I'm using RadCartesianChartView in my Xamarin.Android project. When there are no data to display I see "No Data" message. How can i customize it? I need to change text and textcolor for this message.

[Stefan Nenchev]

Hello, Ilya,

You can directly set the EmptyContent property of the Chart to a string of your choice. I am here adding example on how to do it in a custom renderer for the Xamarin.Forms chart:

[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(CustomChartRenderer))]
namespace DottedSeriesTest.Droid.CustomRenderers
{
    public class CustomChartRenderer : CartesianChartRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)
        {
            base.OnElementChanged(e);
            this.Control.EmptyContent = "Your text or leave empty";
        }
    }
}

As "this.Control" is basically the RadCartesianChartView, you can also directly set it to the instance of the RadCartesianChartView that you have created.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Ilya]

Thanks, Stefan!

But how can I change its color? Is it possible using RadCartesianChartView control API? Default color is black. I need to change it to white.

Also the text in EmptyContent property is displayed always (for cases when there is some data too - see attached screenshot). Should we check this manually?

[Didi]

Hi Ilya,

In CartensianChart the visual element inside the Chart is private by default and it can’t be customized. Only the text in the TextView can be changed through a custom renderer.

What I can suggest you is to use a Label positioned over the Chart and set its Text in case the Chart does not contain any data. In this way you could easily set the TextColor of the "No Data" message. I have prepared a sample example to demonstrate how this would work.

Please check the following files inside the attached project:
- ViewModel.cs, StartPage.xaml.cs and StartPage.xaml files in the Portable project

I hope such an approach would be suitable for you.

Regards,
Didi
Progress Telerik

[Chahat]

thanks  ! its Working For Me  , But  Can you Also Explain About IOS Custom Render For Same Issue 

[Didi]

Hi Chahat,

The native iOS chart does not provide such a message when there is no data loaded. Note that the iOS and Android Charts are two different controls and do not have 100% matching-appearance across all platforms. 

Solution for iOS:

So, to resolve this, you could add a Label containing the Message over the Chart and manually update its Text. I have attached a sample app to demonstrate how this would work.

Regards,
Didi
Progress Telerik