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

Drawing a shape in RadCartesianChart/Scaling horizontal axis

1 Answer 112 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Mladen asked on 04 Dec 2012, 04:04 PM

I have two different questions, but because they are for one chart and therefore are somehow related i'm writting them in one thread. I'll deeply appreciate any help even for one of them.

1. How to create a shape in RadCartesianChart? I want to create a big circle which marks only the last point in chart. I'm trying to use AreaSeries but instead of drawing the form it fills the space from HorizontalAxis to vertical value of the point.

2. How to scale HorizontalAxis. I want horizontal axis to have minimum/maximum value just like the vertical axis, which is LinearAxis. When I use CategoricalAxis for HorizontalAxis the graphic is drawn but I cannot scale. If i replace CategoricalAxis with LinearAxis  no needed graphic is drawed anymore, just empty Chart.

I use the following code:

this.AreaSeries = new AreaSeries(){};

this.LineSeries = new LineSeries(){};

this.LineSeries.CategoryBinding = new GenericDataPointBinding<Point, double>() { ValueSelector = (p) => p.X };

this.LineSeries.ValueBinding = new GenericDataPointBinding<Point, double>() { ValueSelector = (p) => p.Y };

this.AreaSeries.CategoryBinding = new GenericDataPointBinding<Point, double>() { ValueSelector = (p) => p.X };

this.AreaSeries.ValueBinding = new GenericDataPointBinding<Point, double>() { ValueSelector = (p) => p.Y };


var linePoints = CreateDataPoints();

LineSeries.ItemsSource = linePoints;

LineSeries.Stroke = new SolidColorBrush(StrokeColor);

var firstPoint = CreateDataPoints().Last();

var areaPoints = CreateAreaPoints(firstPoint);

AreaSeries.ItemsSource = areaPoints;

AreaSeries.Fill = new SolidColorBrush(StrokeColor);






<telerik:RadCartesianChart x:Name="cartesianChart" FontFamily="{StaticResource MetroFontFamily}" >
            <telerik:CategoricalAxis FontFamily="{StaticResource MetroFontFamily}" FontSize="10" MajorStep="10" Title="{Binding XTag}"></telerik:CategoricalAxis>
            <telerik:LinearAxis Minimum="{Binding Path=YMin}" MajorStep="10" Maximum="{Binding Path=YMax}" FontFamily="{StaticResource MetroFontFamily}"
                                FontSize="10" Title="{Binding YTag}" />
            <telerik:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="3,4" />


Thank you in advance!!!






























































































1 Answer, 1 is accepted

Sort by
Petar Kirov
Telerik team
answered on 07 Dec 2012, 02:49 PM
Hi Mladen,

1. You can use the Annotations feature of the RadCartesianChart. Basically you need to add a CartesianCustomAnnotation to the RadCartesianChart.Annotations collection and specify its HorizontalValue, VerticalValue and Content /ContentTemplate properties. For more information you check this help topic.

2. The CategoricalAxis does not support custom range like the numerical axes (LinearAxis, LogarithmicAxis) do, however you can workaround this by using scatter series instead of categorical ones. (Scatter series work with 2 numerical axes, instead of one categorical and one numerical like categorical series do.) Both LineSeries and AreaSeries have their scatter variants (ScatterLineSeries and ScatterAreaSeries) so you can easily make the switch. 

I hope this helps.
Petar Kirov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Asked by
Top achievements
Rank 1
Answers by
Petar Kirov
Telerik team
Share this question