Areaseries: Use horizontal axis as origin of coloring

3 posts, 0 answers
  1. Christian
    Christian avatar
    17 posts
    Member since:
    May 2016

    Posted 20 Sep Link to this post

    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.

  2. Dess
    Admin
    Dess avatar
    1609 posts

    Posted 21 Sep Link to this post

    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
    Check out the Windows Forms project converter, which aids the conversion process from standard Windows Forms applications written in C# or VB to Telerik UI for WinForms.For more information check out this blog post and share your thoughts.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Christian
    Christian avatar
    17 posts
    Member since:
    May 2016

    Posted 22 Sep Link to this post

    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

Back to Top