Custom crosshair label style

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

    Posted 04 Jan Link to this post

    Hey,

     

    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
    Admin
    Dinko avatar
    202 posts

    Posted 06 Jan 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:RadCartesianChart.Behaviors>
        <telerik:ChartCrosshairBehavior >
            <telerik:ChartCrosshairBehavior.VerticalLineLabelDefinition>
                <telerik:ChartAnnotationLabelDefinition>
                    <telerik:ChartAnnotationLabelDefinition.Template>                                 <DataTemplate>
                            <Grid>
                                <Ellipse HorizontalAlignment="Left" Height="52"  Width="52" Stroke="Red" />
                                <TextBlock FontSize="15" Foreground="Black" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Grid>
                        </DataTemplate>
                    </telerik:ChartAnnotationLabelDefinition.Template>
                </telerik:ChartAnnotationLabelDefinition>
            </telerik:ChartCrosshairBehavior.VerticalLineLabelDefinition>
        </telerik:ChartCrosshairBehavior>
    </telerik:RadCartesianChart.Behaviors>
    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.

    Regards,
    Dinko
    Telerik
    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. UI for WPF is Visual Studio 2017 Ready
  4. Petr
    Petr avatar
    9 posts
    Member since:
    Apr 2014

    Posted 06 Jan 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.

     

    Thanks!

Back to Top