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

CartesianMarkedZone annotation offset

1 Answer 71 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Phillip
Top achievements
Rank 1
Phillip asked on 14 May 2018, 02:01 PM

Hi,

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.

 

Thanks

1 Answer, 1 is accepted

Sort by
0
Accepted
Hristo
Telerik team
answered on 15 May 2018, 09:32 AM
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: https://docs.telerik.com/devtools/winforms/chartview/axes/axes. 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()
    {
        InitializeComponent();
 
        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"));
        this.radChartView1.Series.Add(lineSeries);
 
        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;
        this.radChartView1.Annotations.Add(annotation1);
    }
}

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

Regards,
Hristo
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.
Tags
ChartView
Asked by
Phillip
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Share this question
or