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

[Solved] Styling the BarSeries to show Text Labels

3 Answers 433 Views

Chart for XAML

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

This question is locked. New answers and comments are not allowed.

Arun Gopalakrishna asked on 03 Jun 2013, 12:10 PM

samplegraphreqt.png

Hi,
I have a requirement for styling my stacked bar series in telerik:RadCartesianChart in a way that I should be able to show some Text Values adjacent to the Bar. In my case it is a horizontal stacked chart where on each stacked bar I have to show some text value.

My current code looks like this - It can only show the stacked charts but without the bounded custom text that should be on top of it.
Any help on this will be very useful for us, thanks in advance!

<telerik:RadCartesianChart Height="200" Name="chart">

<telerik:RadCartesianChart.VerticalAxis>

<telerik:CategoricalAxis />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:LinearAxis Minimum="0" Maximum="110" MajorStep="10" Visibility="Collapsed" />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid StripLinesVisibility="Y">

<telerik:CartesianChartGrid.YStripeBrushes>

<SolidColorBrush Color="#F2F2F2" />

</telerik:CartesianChartGrid.YStripeBrushes>

</telerik:CartesianChartGrid>

</telerik:RadCartesianChart.Grid>

<telerik:BarSeries MaxWidth="60" Width="60" CategoryBinding="NOC" ValueBinding="Bronze" CombineMode="Stack" ItemsSource="{Binding AllData}" >

<telerik:BarSeries.DefaultVisualStyle>

<Style TargetType="Border">

<Setter Property="Background" Value="#2FB4E9" />

<Setter Property="CornerRadius" Value="20,0,0,20" />

</Style>

</telerik:BarSeries.DefaultVisualStyle>

</telerik:BarSeries>

<telerik:BarSeries MaxWidth="60" Width="60" CategoryBinding="NOC" ValueBinding="Gold" CombineMode="Stack" ItemsSource="{Binding AllData}">

<telerik:BarSeries.DefaultVisualStyle>

<Style TargetType="Border">

<Setter Property="Background" Value="#F2A000" />

<Setter Property="CornerRadius" Value="0,20,20,0" />

</Style>

</telerik:BarSeries.DefaultVisualStyle>

</telerik:BarSeries>

</telerik:RadCartesianChart>

3 Answers, 1 is accepted

Accepted

answered on 05 Jun 2013, 07:43 AM

HorizontalBarLabels.zip

Hello Arun,

Thank you for contacting us.

You can achieve the desired effect using the BarSeries Labels. They can be easily customized through the LabelDefinitions property. For your convenience, I have attached a project that fits your requirements.

Let me know if this helps.

Regards,
Ivaylo Gergov
Telerik

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 05 Jun 2013, 03:55 PM

Helli Ivaylo,
First of all thanks a ton for the solution, it worked perfectly fine! Even the data binding looked pretty simple and easy to put it in my ViewModel as well. There was one small issue with the rad cartesian chart though, it seems like it auto adjusts its height in any grid row and occupies the full space, anyway where I can fix the width of the bar, not allowing to make it look thicker than a certain pixel.

That I guess should complete my requirement.

Thanks for the help again.

Regards,
Arun