Custom crosshair label style

3 posts, 0 answers
  1. Petr
    Petr avatar
    9 posts
    Member since:
    Apr 2014

    Posted 04 Jan 2016 Link to this post



    I tried getting a around, creating custom template and style for the crosshair labels, however nothing gets displayed.

    Could you point me in the right direction with a simple demo? E.g vertical label being a red circle with the text written in black.


    Thanks in advance

  2. Dinko
    Dinko avatar
    439 posts

    Posted 06 Jan 2016 Link to this post

    Hello Petr,

    To style the labels of the crosshair you can use the HorizontalLineLabelDefinition and VerticalLineLabelDefinition properties of the ChartCrosshairBehavior. You can assign ChartAnnotationLabelDefinitions to them with custom Templates. In the custom template, you can use an Ellipse and TextBlock in a Grid to visualize the corresponding text in a circle. The code snippet below shows how to implement the desired approach:
        <telerik:ChartCrosshairBehavior >
                    <telerik:ChartAnnotationLabelDefinition.Template>                                 <DataTemplate>
                                <Ellipse HorizontalAlignment="Left" Height="52"  Width="52" Stroke="Red" />
                                <TextBlock FontSize="15" Foreground="Black" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    In addition, you can take a look at the Crosshair SDK example that demonstrates possible approaches how to modify the labels.

    Hope this information is useful.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Petr
    Petr avatar
    9 posts
    Member since:
    Apr 2014

    Posted 06 Jan 2016 Link to this post

    Hey Dinko,


    that's exactly what I tried doing, but with no result. I copy-pasted your code to make sure there are no mistakes about it.

    Then I decided to double-check by creating project and then I noticed that by default the label is displayed at the top, so that was the whole problem as I'm using Tooltip behavior which covered the label.



Back to Top