CartesianMarkedZone annotation offset

2 posts, 1 answers
  1. Phillip
    Phillip avatar
    5 posts
    Member since:
    Apr 2018

    Posted 14 May 2018 Link to this post


    I'm trying to create a marked zone that goes between two points in a step line series, but instead the zone runs from the centre of one category to the next.

    Is it at all possible to offset the zone or otherwise transform my data for the chart so that I can get the effect I'm going for? I've attached a quick screenshot showing the actual area in grey and where I would want it as a red outline.



  2. Answer
    Hristo avatar
    1522 posts

    Posted 15 May 2018 Link to this post

    Hello Phillip, 

    Thank you for writing.

    The actual position of the data points with respect to the horizontal axis can be controlled with the PlotMode property of the axis: You can try setting it to BetweenTicks and check if the result would fit better your local setup. I have tested a similar set up on my end as well: 
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
        public RadForm1()
            SteplineSeries lineSeries = new SteplineSeries();
            lineSeries.PointSize = new SizeF(10,10);
            lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));
            lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));
            lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));
            lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));
            CategoricalAxis axis = this.radChartView1.Axes[0] as CategoricalAxis;
            axis.PlotMode = AxisPlotMode.BetweenTicks;
            CartesianPlotBandAnnotation annotation1 = new CartesianPlotBandAnnotation();
            annotation1.Axis = this.radChartView1.Axes[0] as CartesianAxis;
            annotation1.From = "Apr";
            annotation1.To = "Jul";
            annotation1.BackColor = Color.FromArgb(100, Color.LightBlue);
            annotation1.BorderColor = Color.Black;
            annotation1.BorderWidth = 1;

    I am also attaching a screenshot showing the result. Let me know if you need further assistance.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top