Telerik blogs

Hi everyone,
My name is Vesselin Georgiev and I am a technical consultant here at Telerik. This is my first blog post and it is dedicated to labels in RadChart.
By default RadChart will display the value corresponding to the bar (point, slice) as a label.  But RadChart allows you to control the label content. This is possible thanks to the DefaultLabelValue property, which has been around for quite some time now. You can use several “special words” in this property -- "#Y", "#X", “#%”, “#SUM”, “#STSUM”, “#SERIES”, “#ITEM”. They are all listed in the dedicated help topic . This is all good, but what if I want to further customize this label? OK, let’s combine them: DefaultLabelValue=”#Y (#%)”. This will produce a label like “2314 (34%)”. And here is the example:

ChartImage1

This is still quite limited, but here comes the best part. You can add your own formatting to any part of the above example. Say, this is all about the money, so convert these numbers to currency. Here you go – DefaultLabelValue = “#Y{C} (#%)”.

ChartImage2

You have noticed the “{C}” part. That is, you can add any Standard Numeric Format String inside the curly braces. Let’s tune it a bit more – remove the decimals from the amount but specify the percentage with higher precision: “#Y{C0} (#%{#0.###%})” 

 ChartImage3

Yes, there is a second set of curly braces and a Custom Numeric Format String inside.

Ah yes, it is now the Y axis that does not show pretty labels. You can use several pre-defined formats through ValueFormat property: “Currency”, “ShortDate”, “LongDate” etc. And again, you might not quite like them, so why not using your own formatting?  Currency would be fine, but currency with no decimals would be better:

ChartImage4

Just set CustomFormat property to another custom numeric format string - “C0”.

Finally, how did I get the months along the X axis? RadChart accepts only numeric values and dates should be in OLE Automation date format. You can use DateTime.ToOADate() method to convert them. Set ValueFormat property to "ShortDate" and define the format through CustomFormat property. Here is the code for X axis:

RadChart1.PlotArea.XAxis.IsZeroBased = false;  
RadChart1.PlotArea.XAxis.AutoScale = false;  
RadChart1.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;  
RadChart1.PlotArea.XAxis.Appearance.CustomFormat = "MMMM";  
 
// Add the X axis items:  
DateTime start = new DateTime(2008, 1, 1);  
for (int i = 0; i < 6; i++)  
{  
    ChartAxisItem item = new ChartAxisItem();  
    item.Value = (decimal)start.AddMonths(i).ToOADate();  
    RadChart1.PlotArea.XAxis.AddItem(item);  

 

You can find the example here.


Comments

Comments are disabled in preview mode.