This is a migrated thread and some comments may be shown as answers.

Customize "No Data" message in RadCartesianChartView

5 Answers 78 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Ilya
Top achievements
Rank 1
Ilya asked on 18 May 2018, 08:59 AM
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.

5 Answers, 1 is accepted

Sort by
0
Stefan Nenchev
Telerik team
answered on 22 May 2018, 10:48 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ilya
Top achievements
Rank 1
answered on 22 May 2018, 02:36 PM

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?

0
Didi
Telerik team
answered on 25 May 2018, 12:52 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Chahat
Top achievements
Rank 1
answered on 04 Feb 2020, 10:16 AM
thanks  ! its Working For Me  , But  Can you Also Explain About IOS Custom Render For Same Issue 
0
Didi
Telerik team
answered on 04 Feb 2020, 12:48 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
Ilya
Top achievements
Rank 1
Answers by
Stefan Nenchev
Telerik team
Ilya
Top achievements
Rank 1
Didi
Telerik team
Chahat
Top achievements
Rank 1
Share this question
or