Which control is it and how to customize it that way

[Hans-Peter]

Hi,
the Windows Phone Dev Center app there are bar charts implemented with Telerik controls. I have added a screenshot.
Can anyone tell me which control it is and how it is customized to look that way?

Thanks,
Hans-Peter

[Victor]

Hi Hans,

To customize the chart this way you have to set the categorical axis of the bars to be the vertical axis of the chart. With that set, the linear axis is left to be the horizontal axis. Furthermore the horizontal axis is hidden so that it does not draw the labels, ticks and the axis line. Finally, the values next to the bars are the labels of the bar series. You just have to set the ShowLabels property of your bar series to true.

Please write again if you need further assistance.

Regards,
Victor
Telerik

[Hans-Peter]

Hi Victor,
thanks a lot. It works fine. But I can't find where exactly to set the horizontal axis hidden. Which Xaml element is it? The RadCartesianChart.HorizontalAxis seams to have no Visibility property.
A last question: how to format the label of the bar series, e.g. to show just one digit after decimal point? I found some comments about DefaultLabelValue or ItemLabelValue but again, I can't find the place where to set it in Xaml.

Thanks and regards,
Hans-Peter

[Rosy Topchiyska]

Hi Hans,

Thank you for contacting us.

The chart has a HorizontalAxis property that has to be set to an axis element like this:

<telerikChart:RadCartesianChart>
    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:LinearAxis/>
    </telerikChart:RadCartesianChart.HorizontalAxis>
     ...
</telerikChart:RadCartesianChart>

The element that has a Visibility property is the LinearAxis itself:

<telerikChart:LinearAxis Visibility="Collapsed"/>

You can format the series labels by adding a new ChartSeriesLabelDefinition to the BarSeries.LabelDefinitions collection. Here is an article from our online documentation where you can read more about it.

I have attached a sample project that demonstrates how to make the horizontal axis invisible and format the labels.

I hope this helps. Please, let us know if you have further questions.

Regards,
Rositsa Topchiyska
Telerik

[Hans-Peter]

Thanks - very helpful!

Hans-Peter

[Hans-Peter]

It's me again. I am still struggling to get the chart right. I have attatched another screenshot. I have some issues:
1) the label of the first bar is truncated - it should be 6170.0! I really need a solution for this!
2) how to get some distance between bar and label
3) how can I move the axis to the left (and autowrap the text)
4) how to increase the size of the label
5) is there a way to get all bars in the same thickness, independent from the number of bars

Thanks again
Hans-Peter

[Rosy Topchiyska]

Hello Hans-Peter,

I have attached a sample project that demonstrates how you can achieve the desired effects. Now, directly on to your questions:

1. If your data is static and you know its maximum you can set the Maximum property of the axis to such a value that will provide enough space for the problematic label to be displayed. Otherwise you can find the maximum from your data and expose a property in your view model that will give you a proper maximum for the axis dynamically. I have demonstrated this in the attached project.

2. To customize the points labels, you can use the ChartSeriesLabelDefinition.Template property. The context of the template is the corresponding data item for the view model.

3. The chart does not provide functionality to wrap the labels text, but you can again use a custom template with the ChartSeriesLabelDefinition.Template property and try to wrap the text in a TextBlock.

4. See 3.

5. In the BarSeries.PointTemplate you can use a rectangle with fixed height. Note that if the rectangle gets higher than the category slot, it will be clipped. To maximize the available rectangle height, you can set the CategoricalAxis.GapLength property to 0.

I hope this was useful. Do not hesitate to contact us if you have any other questions,

Regards,
Rositsa Topchiyska
Telerik