This is a migrated thread and some comments may be shown as answers.

Custom crosshair label style

2 Answers 67 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Petr
Top achievements
Rank 1
Petr asked on 05 Jan 2016, 12:27 AM

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 Answers, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 06 Jan 2016, 10:08 AM
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
0
Petr
Top achievements
Rank 1
answered on 06 Jan 2016, 02:22 PM

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!

Tags
ChartView
Asked by
Petr
Top achievements
Rank 1
Answers by
Dinko
Telerik team
Petr
Top achievements
Rank 1
Share this question
or