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

Horizontal axis inside a chart area

4 Answers 80 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Sergei
Top achievements
Rank 1
Sergei asked on 24 May 2016, 10:30 AM

Hello,

I need to display categorical X axis at Y=0 point, like on the picture. If 0 is out of Y axis range, X axis should be displayed at the bottom as by default. There is a CategoricalAxis.VerticalLocation property but it has only Top and Bottom options.

I shifted the axis manually using TranslateTransform for the example. But I need XAML to be independent on data source.

                            <telerik:RadCartesianChart.HorizontalAxis>
                                <telerik:CategoricalAxis PlotMode="OnTicksPadded" LabelFitMode="MultiLine">
                                    <chartview:CategoricalAxis.RenderTransform>
                                        <TranslateTransform Y="-149"/>
                                    </chartview:CategoricalAxis.RenderTransform>
                                </telerik:CategoricalAxis>
                            </telerik:RadCartesianChart.HorizontalAxis>

Are there any ways how to do it?

Thanks,

Sergei

4 Answers, 1 is accepted

Sort by
0
Accepted
Peshito
Telerik team
answered on 25 May 2016, 12:12 PM
Hello,

The ChartView control does not support changing the origin position of the axes. The horizontal axis can be positioned at the top or bottom of the plot area. However, you can achieve your requirement using  annotations. Basically, by doing the following:
  • Define BarSeries and populate its ItemsSource with your data.
  • Hide the vertical axis of the chart by setting its ElementBrush property to Transparent. This will hide the ticks, labels and the axis' line.
  • Define a CartesianGridLineAnnotation and position it at value 0. This line will represent the axis.
  • Define CartesianCustomAnnotations which will present the labels of the annotation used as an axis. To do so you can subscribe for the Loaded event of the series. If you have a data bound scenario you can use the series' DataBindingCompleted event instead of Loaded. Then in the event handler you can get the categorical axis' categories using its Categories property and based on it create the annotations.
Attached is a sample project demonstrating this approach.

Hope it helps.


Regards,
Peshito
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Sergei
Top achievements
Rank 1
answered on 26 May 2016, 09:38 AM

Thank you Peshito.

Unfortunately I can't use "smart labels" in this way. But you helped me to get an idea to combine CustomAnnotation and VisualBrush.

Thanks a lot!

Sergei

0
Mark
Top achievements
Rank 1
answered on 25 Apr 2019, 02:33 PM

Hello Peshito,

I found your annotation example helpful but I need to accomplish the same effect on the Y-Axis "Vertical" and it is a linear type axis not categorical. 

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>

Could you detail the following code behind for a linear  ScatterPlotSeries?

Your original code:

            var series = (BarSeries)sender;
            var categories = (this.chart.HorizontalAxis as CategoricalAxis).Categories;
            foreach (ChartAxisCategoryInfo categoryInfo in categories)
            {
                var category = categoryInfo.Category;
                var lableAnnotation = new CartesianCustomAnnotation()
                {
                    VerticalAlignment = System.Windows.VerticalAlignment.Center,
                    HorizontalAlignment = System.Windows.HorizontalAlignment.Center,
                    VerticalOffset = 20,
                    HorizontalValue = category,
                    VerticalValue = 0,
                    Content = category,
                    ContentTemplate = (DataTemplate)this.Resources["labelAnnotationsTemplate"],
                   
                };
                this.chart.Annotations.Add(lableAnnotation);
            }

My unfinished code:

            var series = (ScatterPointSeries)sender;
            var labels = (this.chart.HorizontalAxis as LinearAxis).???;
            //foreach (ChartAxisCategoryInfo categoryInfo in categories)
            //{
            //    var category = categoryInfo.Category;
            //    var lableAnnotation = new CartesianCustomAnnotation()
            //    {
            //        VerticalAlignment = System.Windows.VerticalAlignment.Center,
            //        HorizontalAlignment = System.Windows.HorizontalAlignment.Center,
            //        VerticalOffset = 20,
            //        HorizontalValue = category,
            //        Content = category,
            //        ContentTemplate = (DataTemplate)this.Resources["labelAnnotationsTemplate"],
                   
            //    };
            //    this.chart.Annotations.Add(lableAnnotation);
            //}

0
Vladimir Stoyanov
Telerik team
answered on 30 Apr 2019, 09:29 AM
Hello Mark,

Thank you for the provided sample code. 

May I ask you to check out the AxisLikeAnnotations SDK example and more specifically NumericAxisExample.xaml.cs file? Please, give the demonstrated approach a try and let me know, if it helps.

I am looking forward to your reply.

Regards,
Vladimir Stoyanov
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
Sergei
Top achievements
Rank 1
Answers by
Peshito
Telerik team
Sergei
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Vladimir Stoyanov
Telerik team
Share this question
or