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

CartesianGridLineAnnotation Labels cut off

1 Answer 79 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Karl B
Top achievements
Rank 1
Karl B asked on 26 Oct 2018, 03:29 AM

I am trying to understand how to prevent my LineAnnotation labels from being cut off.  Here is a contrived example.  I realize I could pick different locations but is there some kind of margin I can give the chart to see the text in the cases shown below? See attached image.

 

<Grid x:Name="LayoutRoot">
    <telerik:RadCartesianChart >
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LinearAxis x:Name="horizontalAxis"  >
            </telerik:LinearAxis>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis >
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Annotations>
            <telerik:CartesianGridLineAnnotation Axis="{Binding ElementName=horizontalAxis}"
                                                 Value="48"
                                                 Stroke="#f7706c"
                                                 Label="Label Cut Off At Top"                                                 
                                                 StrokeThickness="1" >
                <telerik:CartesianGridLineAnnotation.LabelDefinition>
                    <telerik:ChartAnnotationLabelDefinition Location="Top"                                                               
                                                            HorizontalOffset="4"  />
                </telerik:CartesianGridLineAnnotation.LabelDefinition>
            </telerik:CartesianGridLineAnnotation>
            <telerik:CartesianGridLineAnnotation Axis="{Binding ElementName=horizontalAxis}"
                                                 Value="108"
                                                 Stroke="#f7706c"
                                                 Label="Label Cut Off To the Right"
                                                 StrokeThickness="1"/>
        </telerik:RadCartesianChart.Annotations>
        <telerik:RadCartesianChart.Series>
            <telerik:ScatterSplineAreaSeries >
                <telerik:ScatterSplineAreaSeries.DataPoints>
                    <telerik:ScatterDataPoint XValue="30" YValue="40"/>
                    <telerik:ScatterDataPoint XValue="70" YValue="25"/>
                    <telerik:ScatterDataPoint XValue="100" YValue="20"/>
                </telerik:ScatterSplineAreaSeries.DataPoints>
            </telerik:ScatterSplineAreaSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
</Grid>

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Martin Ivanov
Telerik team
answered on 30 Oct 2018, 09:38 AM
Hello Karl,

You can avoid the clipping by setting the ClipToPlotArea property of the annotation to False. Note that even in this case the label might be cut off if goes ouside of the chart bounds. In this case you can set the ClipToBounds property of the chart to False.

Additionally, you can use the alignment properties of the annotation's label definition to manually adjust the label.

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ChartView
Asked by
Karl B
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or