Custom crosshair label style

[Petr]

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

[Dinko | Tech Support Engineer]

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

[Petr]

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!