Which control is it and how to customize it that way

7 posts, 0 answers
  1. Hans-Peter
    Hans-Peter avatar
    4 posts
    Member since:
    Oct 2013

    Posted 31 Jan 2014 Link to this post

    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
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 04 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peek previews directly from the developers working on the UI for Windows Phone, subscribe to the blog feed now.
  3. DevCraft banner
  4. Hans-Peter
    Hans-Peter avatar
    4 posts
    Member since:
    Oct 2013

    Posted 07 Feb 2014 in reply to Victor Link to this post

    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
  5. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 12 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peek previews directly from the developers working on the UI for Windows Phone, subscribe to the blog feed now.
  6. Hans-Peter
    Hans-Peter avatar
    4 posts
    Member since:
    Oct 2013

    Posted 22 Feb 2014 in reply to Rosy Topchiyska Link to this post

    Thanks - very helpful!

    Hans-Peter
  7. Hans-Peter
    Hans-Peter avatar
    4 posts
    Member since:
    Oct 2013

    Posted 01 Mar 2014 in reply to Rosy Topchiyska Link to this post

    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
  8. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 04 Mar 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peek previews directly from the developers working on the UI for Windows Phone, subscribe to the blog feed now.

Back to Top
DevCraft banner