[Solved] Customising RadCartesianChart

[Shashank]

Hi,

I am using the telerik:RadCartesianChart and facing the following issues

1. How to wrap X axis content for X axis? Though i am using LabelStyle and setting property of TextWrapping as Wrap
2. How to show % symbol on Y axis along with values?
3. How to have padding / spaces between Labels and X axis in case value is negative?
4. How to change the color of Lables, X & Y asis lines?

<telerik:RadCartesianChart x:Name="WHLBarChart" ClipToBounds="True"  Height="250"  Margin="50" Width="600" HorizontalAlignment="Left" VerticalAlignment="Top" >
<telerik:RadCartesianChart.VerticalAxis>   
<telerik:LinearAxis LabelStyle="{StaticResource MyLabelStyle}"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis LabelStyle="{StaticResource MyLabelStyle}" MaxWidth="30"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:BarSeries ItemsSource="{Binding}" PaletteMode="DataPoint" ShowLabels="True" >
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="ScenarioName">
</telerik:PropertyNameDataPointBinding>
</telerik:BarSeries.CategoryBinding>
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="ScenarioValue">
</telerik:PropertyNameDataPointBinding>
</telerik:BarSeries.ValueBinding>
</telerik:BarSeries>
</telerik:RadCartesianChart>

<Style x:Key="MyLabelStyle" TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap" />
</Style>

Please help

[Ivaylo Gergov]

Hello Shashank,

Thank you for your interest.

1. You should set MaxWidth property in the Style, because by default it has no measures.
2. If you are visualizing data in the range 0 - 1 you can format the axis labels with LabelFormat property like this:

<telerik:LinearAxis LabelFormat="{}{0:p0}" Maximum="1" />

        Alternatively, you can use a custom value converter. For example:

<telerik:LinearAxis>
                <telerik:LinearAxis.LabelTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Converter={StaticResource LabelConverter}}" Margin="4"/>
                    </DataTemplate>
                </telerik:LinearAxis.LabelTemplate>
            </telerik:LinearAxis>

Where LabelConverter is a class which inherits the IValueConverter interface and it is defined in the resources:

<local:LabelConverter x:Key="LabelConverter"/>

public class LabelConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return String.Format("{0} %", value.ToString());
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

       3. Could you elaborate a bit more what are you trying to achieve and do you want to customize the axis or the series labels?
       4. You can change the color of axis line and axis labels through LineStyle and LabelStyle properties like this:

<telerik:RadCartesianChart.HorizontalAxis>
    <telerik:CategoricalAxis>
        <telerik:CategoricalAxis.LabelStyle>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Red" />
            </Style>
        </telerik:CategoricalAxis.LabelStyle>
        <telerik:CategoricalAxis.LineStyle>
            <Style TargetType="Line">
                <Setter Property="Stroke" Value="Red"/>
            </Style>
        </telerik:CategoricalAxis.LineStyle>
    </telerik:CategoricalAxis>
</telerik:RadCartesianChart.HorizontalAxis>

To change the color of the series labels you can use LabelDefinitions. More information can be found here.

I hope this helps.

Regards,
Ivaylo Gergov
the Telerik team

[Shashank]

Hi Ivaylo,

Thanks for the response, but still I am not able to solve of the issues.

1. I am already MaxWidth property to wrap the x Axis content but its not working.
2. Changing Color worked well but still I can see the lines pointing to Category & Values. Click here
2. I tried Changing color referring the link provided, but after applying it, the value itself is not been shown.
     As my class just has Category And Value find, hence i Just wanna show the value in the Labels
         

public string Category { get; set; }
public double Value { get; set; }
<telerik:BarSeries.LabelDefinitions>
<telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center">
<telerik:ChartSeriesLabelDefinition.Template>
<DataTemplate>
<TextBlock Text="{Binding DataItem.Value}" Foreground="#F36622"/>
</DataTemplate>
</telerik:ChartSeriesLabelDefinition.Template>
</telerik:ChartSeriesLabelDefinition>
</telerik:BarSeries.LabelDefinitions>

3. How can I show The Horizontal Lines Representing the values Corresponding to X axis? Like this

Looking forward for a quick response.

Thanks,
-Shashank

[Ivaylo Gergov]

Hello Shashank,

For your convenience I have prepared a sample project that demonstrates how to achieve the desired functionality. Please, find the attached file.
As you can see in the project I have changed the color of the MajorTicks using the CategoricalAxis.MajorTickStyle property. I have also used CategoricalAxis.LabelStyle property to change the MaxWidth and TextWrapping properties of the TextBlock which represents the axis labels.
Then I have used RadCartesianChart.Grid to show the mentioned lines pointing to the X values. Then I have set BarSeries.ShowLabels="True" in order to show the labels of the Series. Also, the series label foreground is set through the ChartSeriesLabelDefinition.DefaultVisualStyle property.

I hope this helps.

 

Kind regards,
Ivaylo Gergov
the Telerik team

[Shashank]

Thanks Ivaylo,

Every thing worked, it would be of great help if you can let me know with sample how can I take care of the following things too :-

1. I can bring the horizontal lines on the X & Y axis of bar chart now, but how can I change its color, by default its white?
2. How can I append % symbol to the values shown in Y axis?

Thanks again for your effort in being such prompt to my queries.

Regards,
-Shashank

[Ivaylo Gergov]

Hello Shashank,

I have updated the project in order to match your requirements(see the attached file).
As you can see I have used the mentioned in the previous post approach with a custom converter. I have also used the CartesianChartGrid.MajorYLineStyle property in order to change the appearance of the horizontal gridlines.

I hope this is helps.

 

Kind regards,
Ivaylo Gergov
the Telerik team

[Shashank]

Thanks a ton Ivaylo, now everything is perfect as per my need.

[Giri]

hi,

In the attached chartstylingproject, how to format the label text. for example. how to use converter in that.

[Giuseppe]

Hello Giri,

As you can see in the attached application in our previous reply, you can define custom label content (and converter) by setting custom data template for axis labels through Axis.LabelTemplate property and for series labels through ChartSeriesLabelDefinition.Template property.

Could you elaborate a bit more what exactly are you trying to achieve as label formatting can be achieved in a simpler way by setting Axis.LabelFormat property for axis labels and ChartSeriesLabelDefinition.Format for series labels?


All the best,
Giuseppe
the Telerik team

[Sergey]

Hi!

I work with RadCartesianChart. I am trying to set up a change function for set up the value for CategoricalDataPoint via the TextBox located in the chart area.

Example in attach jpg file.

[Yana]

Hi Sergey,

Could you please specify which RadCartesianChart exactly you're using?  I am asking as this thread is about the UI for Windows 8 XAML discontinued product and I supposed you mean RadChart for WPF? If that's the case, please post the question in the corresponding WPF forum.

Regards,
Yana
Progress Telerik