How to move the Axis Title ? and draw a line on the chart.

1 Answer 184 Views
Chart General Discussions
Didier
Top achievements
Rank 2
Iron
Iron
Didier asked on 01 Sep 2021, 03:16 PM | edited on 01 Sep 2021, 03:18 PM

Hi all,

 


<telerik:RadCartesianChart Grid.Column="0">
                            <telerik:RadCartesianChart.HorizontalAxis>
                                <telerik:CategoricalAxis TickThickness="5" MajorTickInterval="1" MajorTickLength="5" Title="Conc."/>
                                
                            </telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:RadCartesianChart.VerticalAxis>
                                <telerik:LinearAxis Minimum="0" LineDashArray="5, 10, 15" TickThickness="5" Title="OD"/>
                            </telerik:RadCartesianChart.VerticalAxis>

                            <telerik:RadCartesianChart.Series>
                                <telerik:PointSeries x:Name="ChartCurve" CategoryBinding="Concentration" ValueBinding="OpticalDensity">
                                    <telerik:PointSeries.PointTemplate>
                                        <DataTemplate>
                                            <Ellipse Width="10" Height="10" Fill="{StaticResource DarkGray}"/>          
                                        </DataTemplate>
                                    </telerik:PointSeries.PointTemplate>
                                </telerik:PointSeries>
                            </telerik:RadCartesianChart.Series>
                            <telerik:RadCartesianChart.Grid>
                                <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                            </telerik:RadCartesianChart.Grid>
                            <telerik:RadCartesianChart.Annotations>
                                <telerik:CartesianCustomLineAnnotation 
                                       HorizontalFrom="0.0" VerticalFrom="2.25" 
                                       HorizontalTo="20" VerticalTo="10" 
                                       Stroke="{StaticResource DarkGray}"  
                                       StrokeThickness="3" />
                            </telerik:RadCartesianChart.Annotations>
                        </telerik:RadCartesianChart>

1) I try to add a line, doesnt work with

telerik:CartesianCustomLineAnnotation

2)  change position of Title Y axis to top position,  and 3) change position of Title X axis to right.  Doesnt found the way to do it

Thanks in advance for your help

Didier

1 Answer, 1 is accepted

Sort by
1
Accepted
Dinko | Tech Support Engineer
Telerik team
answered on 06 Sep 2021, 09:52 AM

Hi Didier,

Thank you for the provided details.

I have tested your approach and I was able to add an annotation. May I ask you to check the attached project and let me know what I am missing from your set-up to reproduce this.

As for your other questions. RadCartesianChart does not expose API for advanced axis title positioning as you require. I believe that a more straightforward solution would be to use separate TextBlocks (outside of the chart) and position them in the corresponding places. Here is an example:

<Grid x:Name="LayoutRoot" Background="White">
    <TextBlock Text="AxisX Title" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
         
    <telerik:RadCartesianChart x:Name="chart" Margin="10 10 10 10">
        <!--...-->
    </telerik:RadCartesianChart>
 
    <TextBlock Text="AxisY Title" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>

Regards,
Dinko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Didier
Top achievements
Rank 2
Iron
Iron
commented on 08 Sep 2021, 10:54 AM

Thank you Dinko,

 

I solved like this  :

 


                        <telerik:RadCartesianChart Grid.Column="0" Margin="0,30,0,30" Foreground="{StaticResource DarkGray}">
                            <telerik:RadCartesianChart.HorizontalAxis>
                                <telerik:LinearAxis x:Name="hAxis" ShowLabels="True">
                                </telerik:LinearAxis>
                            </telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:RadCartesianChart.VerticalAxis>
                                <telerik:LinearAxis x:Name="vAxis"/>
                            </telerik:RadCartesianChart.VerticalAxis>
                            <telerik:ScatterPointSeries x:Name="ChartCurve" XValueBinding="Concentration" YValueBinding="OpticalDensity" Foreground="{StaticResource DarkGray}">
                                <telerik:ScatterPointSeries.PointTemplate>
                                    <DataTemplate>
                                        <Ellipse Width="10" 
                                                Height="10" 
                                            Fill="{StaticResource ElectricBlue}"/>
                                    </DataTemplate>
                                </telerik:ScatterPointSeries.PointTemplate>
                            </telerik:ScatterPointSeries>
                            <telerik:RadCartesianChart.Grid>
                                <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                            </telerik:RadCartesianChart.Grid>
                            <telerik:RadCartesianChart.Annotations>
                                <telerik:CartesianCustomLineAnnotation Stroke="Red" 
StrokeThickness="2" HorizontalFrom="0" HorizontalTo="{Binding CONCMAX}" 
VerticalFrom="{Binding A}" VerticalTo="{Binding YMAX}" />
                            </telerik:RadCartesianChart.Annotations>
                        </telerik:RadCartesianChart>

Tags
Chart General Discussions
Asked by
Didier
Top achievements
Rank 2
Iron
Iron
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or