Areaseries: Use horizontal axis as origin of coloring

[Christian]

Hi,

I am trying to snap the coloring of area series around to horizontal axis. The first pic (Area Coloring) illustrates what I've got, Area Color Goal what I'd like to see. I've already tried to split negative values from positives, like this http://www.telerik.com/forums/set-the-color-of-negative-value-on-areaseries, but the result is the same in winforms.

Please advise.

Best Regards.

[Dess | Tech Support Engineer, Principal]

Hello Christian,

Thank you for writing.  

The possible solution that I can suggest to achieve the illustrated screenshot is to combine two RadChartView controls and split the data in different series. The second chart will use an inverse axis to display the negative values. Here is a sample code snippet which result is illustrated on the attached screenshot: 

public Form1()
{
    InitializeComponent();
    AreaSeries areaSeries = new AreaSeries();
    areaSeries.DataPoints.Add(new CategoricalDataPoint(13, DateTime.Now.AddDays(1)));
    areaSeries.DataPoints.Add(new CategoricalDataPoint(17, DateTime.Now.AddDays(2)));
    areaSeries.DataPoints.Add(new CategoricalDataPoint(2, DateTime.Now.AddDays(3)));
    for (int i = 4; i < 7; i++)
    {
        areaSeries.DataPoints.Add(new CategoricalDataPoint(null, DateTime.Now.AddDays(i)));
    }
    this.radChartView1.Series.Add(areaSeries);

    AreaSeries areaSeries2 = new AreaSeries();
    for (int i = 1; i < 4; i++)
    {
        areaSeries2.DataPoints.Add(new CategoricalDataPoint(null, DateTime.Now.AddDays(i)));
    }
    areaSeries2.DataPoints.Add(new CategoricalDataPoint(2, DateTime.Now.AddDays(4)));
    areaSeries2.DataPoints.Add(new CategoricalDataPoint(13, DateTime.Now.AddDays(5)));
    areaSeries2.DataPoints.Add(new CategoricalDataPoint(13, DateTime.Now.AddDays(6)));
    this.radChartView2.Series.Add(areaSeries2);

    AreaSeries areaSeries3 = new AreaSeries();
    areaSeries3.DataPoints.Add(new CategoricalDataPoint(2, DateTime.Now.AddDays(7)));
    areaSeries3.DataPoints.Add(new CategoricalDataPoint(4, DateTime.Now.AddDays(8)));
    areaSeries3.DataPoints.Add(new CategoricalDataPoint(5, DateTime.Now.AddDays(9)));
    for (int i = 10; i < 12; i++)
    {
        areaSeries3.DataPoints.Add(new CategoricalDataPoint(null, DateTime.Now.AddDays(i)));
    }
    this.radChartView1.Series.Add(areaSeries3);

    AreaSeries areaSeries4 = new AreaSeries();
    for (int i = 7; i < 10; i++)
    {
        areaSeries4.DataPoints.Add(new CategoricalDataPoint(null, DateTime.Now.AddDays(i)));
    }
    areaSeries4.DataPoints.Add(new CategoricalDataPoint(13, DateTime.Now.AddDays(10)));
    areaSeries4.DataPoints.Add(new CategoricalDataPoint(11, DateTime.Now.AddDays(11)));
    this.radChartView2.Series.Add(areaSeries4);

    CategoricalAxis horizontalAxis1 = this.radChartView1.Axes[0] as CategoricalAxis;
    horizontalAxis1.LabelFormat = "{0:dd/MM}";

    CategoricalAxis horizontalAxis2 = this.radChartView2.Axes[0] as CategoricalAxis;
    horizontalAxis2.VerticalLocation = AxisVerticalLocation.Top;
    horizontalAxis2.LabelFormat = "{0:dd/MM}";
    horizontalAxis2.ForeColor = Color.Transparent;
    horizontalAxis2.LineWidth = 0;
    horizontalAxis2.TickWidth = 0;
    LinearAxis verticalAxis = this.radChartView2.Axes[1] as LinearAxis;
    verticalAxis.IsInverse = true;
    verticalAxis.LabelFormatProvider = new MyFormatProvider();
    this.radChartView1.View.Margin = new Padding(10, 0, 10, -5);
    this.radChartView2.View.Margin = new Padding(10, -10, 10, 0);

    this.radSplitContainer1.SplitterWidth = 0;
}

public class MyFormatProvider : IFormatProvider, ICustomFormatter
{
    public object GetFormat(Type formatType)
    {
        return this;
    }

    public string Format(string format, object arg, IFormatProvider formatProvider)
    {
        return "-" + arg.ToString();
    }
}

The following help articles are quite useful for achieving this result:
http://docs.telerik.com/devtools/winforms/chartview/series-types/area
http://docs.telerik.com/devtools/winforms/chartview/axes/axes 
http://docs.telerik.com/devtools/winforms/chartview/axes/inverse-axis
http://docs.telerik.com/devtools/winforms/chartview/customization/custom-labels-text

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Dess
Telerik by Progress

[Christian]

Hi Dess,

thank you for the quick and elaborate answer. Unfortunately this solution is suboptimal, hence I decided to rebuild the report with WPF.

Best regards,

Christian