Alternating colors (red and yellow) for data points in range bar series

[Om Pushkara deep]

Hi ,

I am trying to create a range bar series . In that data points should be alternating colors red and yellow only . I found one from chart grid : https://docs.telerik.com/devtools/winforms/controls/chartview/features/chart-grid but not for data points . Are there any properties to achieve this?

 

Code attached:

private void LoadBarChart()
        {

            this.radChartView1.AreaType = ChartAreaType.Cartesian;
            this.radChartView1.ChartElement.AngleTransform = 90;
            RangeBarSeries rangeBarSeries = new RangeBarSeries("End Time", "Start Time", "Summarization Date");
            rangeBarSeries.CombineMode = ChartSeriesCombineMode.None;

            this.radChartView1.ChartElement.View.Margin = new Padding(40, 40, 40, 100);

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/17/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/17/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "5/17/2021"));


            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 30, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/18/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/18/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "5/19/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes - 89, DateTime.Now.TimeOfDay.TotalMinutes - 100, "5/20/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/20/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes - 79, DateTime.Now.TimeOfDay.TotalMinutes - 90, "5/21/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/21/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/22/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/22/2021"));


            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/23/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/23/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/25/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/24/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/26/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/26/2021"));


            CategoricalAxis horizontalAxis = new CategoricalAxis();

           // horizontalAxis.Title = "Summarization Days";
            horizontalAxis.ClipLabels = false;
            horizontalAxis.LabelRotationAngle = -90;
            horizontalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
            horizontalAxis.BackColor = Color.Red;
            horizontalAxis.PlotMode = AxisPlotMode.BetweenTicks;
            horizontalAxis.LabelFormatProvider = new MyFormatProviderX();
            rangeBarSeries.HorizontalAxis = horizontalAxis;

            ChartTooltipController tooltipController = new ChartTooltipController();
            tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;
            this.radChartView1.Controllers.Add(tooltipController);

           // rangeBarSeries.ShowLabels = true;
            this.radChartView1.Series.Add(rangeBarSeries);
            radChartView1.ShowToolTip = true;
            rangeBarSeries.CombineMode = ChartSeriesCombineMode.None;

    

            rangeBarSeries.VerticalAxis.LabelFormatProvider = new MyFormatProvider();
            rangeBarSeries.VerticalAxis.Title = "Time of the day";
            rangeBarSeries.VerticalAxis.ClipLabels = false;
            rangeBarSeries.VerticalAxis.LabelRotationAngle = -90;
            rangeBarSeries.VerticalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
           

            LinearAxis verticalAxis = radChartView1.Axes.Get<LinearAxis>(1);
            verticalAxis.Minimum = 0; //Minutes 0:00
            verticalAxis.Maximum = 1380; //Minutes 23:00
            verticalAxis.MajorStep = 60; //60 minutes in an hour
         

            CartesianArea area = this.radChartView1.GetArea<CartesianArea>();
            area.ShowGrid = true;

            CartesianGrid grid = area.GetGrid<CartesianGrid>();
            grid.DrawVerticalStripes = true;
            grid.DrawHorizontalStripes = false;
        }


        private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
        {
            RangeDataPoint dp = e.DataPoint as RangeDataPoint;
            if (dp != null)
            {
                e.Text = dp.High + " " + dp.Low;
            }
        }

    }
}

public class MyFormatProvider : IFormatProvider, ICustomFormatter
{
    public object GetFormat(Type formatType)
    {
        return this;
    }
    public string Format(string format, object arg, IFormatProvider formatProvider)
    {
        int totalminutes = Convert.ToInt32(arg);

        TimeSpan timeSpan = TimeSpan.FromMinutes(totalminutes);

        return timeSpan.ToString(@"hh\:mm");
    }
}

[Nadya | Tech Support Engineer]

Hello,

If I understand you correctly you want to have two colors (red and yellow) for the RangeDataPoint in RangeBarSeries. I would like to note that RadChartView offers palettes that are a quick and easy way to define a skin for your chart view. You can choose a palette from a collection of predefined ones or create your own palette with desired colors. More information is available here: https://docs.telerik.com/devtools/winforms/controls/chartview/customization/palettes 

I used the provided code snippet in my sample project and apply a palette to the RangeBarSeries as follows:

rangeBarSeries.Palette = new PaletteEntry(Color.Red, Color.Yellow);

This is a sample demonstration. Feel free to adjust the colors according to your needs.

I hope this helps. Should you have any other questions please let me know.

Regards,
Nadya
Progress Telerik