Change color for specific values in SplineAreaSeries

Question

Hello. I my xamarin forms app I have a SplineAreaSeries. I wanna change the color with gradient color for the first 4 values. The code is

ObservableCollection<Person> erythemaModel = new ObservableCollection<Person>();

            erythemaModel.Add(new Person("06:00", 0));
            erythemaModel.Add(new Person("07:00", 1.7));
            erythemaModel.Add(new Person("08:00", 2.6));
            erythemaModel.Add(new Person("09:00", 3));
            erythemaModel.Add(new Person("10:00", 3.5));
            erythemaModel.Add(new Person("11:00", 3.8));
            erythemaModel.Add(new Person("12:00", 3.1));
            erythemaModel.Add(new Person("13:00", 4.0));
            erythemaModel.Add(new Person("14:00", 4.8));
            erythemaModel.Add(new Person("15:00", 4.1));
            erythemaModel.Add(new Person("16:00", 4.4));
            erythemaModel.Add(new Person("17:00", 4.7));
            erythemaModel.Add(new Person("18:00", 4.3));

int index = 5;

SfChart chart = new SfChart();

            //Initializing primary axis
            CategoryAxis primaryAxis = new CategoryAxis();
            chart.PrimaryAxis = primaryAxis;

            //Initializing secondary Axis
            NumericalAxis secondaryAxis = new NumericalAxis();
            chart.SecondaryAxis = secondaryAxis;
            secondaryAxis.Minimum = 0;
            secondaryAxis.Maximum = 70;

//Initializing column series
SplineAreaSeries series = new SplineAreaSeries();

series.ItemsSource = erythemaModel;

series.XBindingPath = "Name";
series.YBindingPath = "Height";

series.EnableAnimation = true;
series.AnimationDuration = 1;

series.Color = Color.FromHex("#1A000000");

series.ColorModel.CustomBrushes = new ChartColorCollection()
{

Color.Red,

Color.Red
};

            EllipseAnnotation ellipse1 = new EllipseAnnotation()
            {
                X1 = index,
                Y1 = erythemaModel[index].Height,
                Width = 15,
                Height = 15,
                FillColor = Color.White,
                StrokeColor = Color.FromRgb(248, 83, 172)
            };

            LineAnnotation line1 = new LineAnnotation()
            {
                X1 = index,
                Y1 = erythemaModel[index].Height,
                X2 = index,
                Y2 = erythemaModel[index].Height + 40,
                StrokeColor = Color.FromRgb(248, 83, 172),
                StrokeWidth = 4,
            };

            TextAnnotation text1 = new TextAnnotation()
            {
                X1 = index,
                Y1 = line1.Y2,
                Text = erythemaModel[index].Name
            };

            text1.LabelStyle = new ChartAnnotationLabelStyle()
            {
                FontSize = 30,
                TextColor = Color.White,
                BackgroundColor = Color.FromRgb(248, 83, 172),
                BorderColor = Color.FromRgb(248, 83, 172),
                BorderThickness = new Thickness(30)
            };

            chart.ChartAnnotations.Add(ellipse1);
            chart.ChartAnnotations.Add(line1);
            chart.ChartAnnotations.Add(text1);

series.EnableTooltip = true;

chart.PrimaryAxis.ShowMajorGridLines = false;
chart.SecondaryAxis.ShowMajorGridLines = false;
chart.SecondaryAxis.IsVisible = false;

chart.Series.Add(series);

this.Content = chart;

Konstantinos Evangelidis · Answer

I found the solution. I just had to make a seconds chart with different color. The code below.

InitializeComponent();

            ObservableCollection<Person> erythemaModel = new ObservableCollection<Person>
            {
                new Person("06:00", 0),
                new Person("07:00", 1.7),
                new Person("08:00", 2.6),
                new Person("09:00", 3),
                new Person("10:00", 3.5),
                new Person("11:00", 3.8),
                new Person("12:00", 3.1),
                new Person("13:00", 4.0),
                new Person("14:00", 4.8),
                new Person("15:00", 4.1),
                new Person("16:00", 4.4),
                new Person("17:00", 4.7),
                new Person("18:00", 4.3)
            };

            int index = 6;

SfChart chart = new SfChart();

            //Initializing primary axis
            CategoryAxis primaryAxis = new CategoryAxis();
            chart.PrimaryAxis = primaryAxis;

            //Initializing secondary Axis
            NumericalAxis secondaryAxis = new NumericalAxis();
            chart.SecondaryAxis = secondaryAxis;
            secondaryAxis.Minimum = 0;
            secondaryAxis.Maximum = 40;

            //Initializing column series
            SplineAreaSeries series = new SplineAreaSeries();
            series.ItemsSource = erythemaModel;
            series.XBindingPath = "Name";
            series.YBindingPath = "Height";

series.EnableAnimation = true;
series.AnimationDuration = 1;

series.Color = Color.FromHex("#1A000000");

            EllipseAnnotation ellipse1 = new EllipseAnnotation()
            {
                X1 = index,
                Y1 = erythemaModel[index].Height,
                Width = 15,
                Height = 15,
                FillColor = Color.White,
                StrokeColor = Color.FromRgb(248, 83, 172)
            };

            LineAnnotation line1 = new LineAnnotation()
            {
                X1 = index,
                Y1 = erythemaModel[index].Height,
                X2 = index,
                Y2 = erythemaModel[index].Height + 20,
                StrokeColor = Color.FromRgb(248, 83, 172),
                StrokeWidth = 4,
            };

            TextAnnotation text1 = new TextAnnotation()
            {
                X1 = index,
                Y1 = line1.Y2,
                Text = erythemaModel[index].Name
            };

            text1.LabelStyle = new ChartAnnotationLabelStyle()
            {
                FontSize = 30,
                TextColor = Color.White,
                BackgroundColor = Color.FromRgb(248, 83, 172),
                BorderColor = Color.FromRgb(248, 83, 172),
                BorderThickness = new Thickness(30)
            };

            chart.ChartAnnotations.Add(ellipse1);
            chart.ChartAnnotations.Add(line1);
            chart.ChartAnnotations.Add(text1);

            SplineAreaSeries series2 = new SplineAreaSeries();
            ObservableCollection<Person> Data = new ObservableCollection<Person>
            {
                new Person("06:00", 0),
                new Person("07:00", 1.7),
                new Person("08:00", 2.6),
                new Person("09:00", 3),
                new Person("10:00", 3.5),
                new Person("11:00", 3.8)
        };

series2.ColorModel.Palette = ChartColorPalette.Custom;

            ChartGradientColor gradientColor = new ChartGradientColor() { StartPoint = new Point(0, 0.5f), EndPoint = new Point(1, 0.5f) };
            ChartGradientStop stop1 = new ChartGradientStop() { Color = Color.FromHex("#fdc8e9"), Offset = 0 };
            ChartGradientStop stop2 = new ChartGradientStop() { Color = Color.FromHex("#9d1141"), Offset = 1 };
            gradientColor.GradientStops.Add(stop1);
            gradientColor.GradientStops.Add(stop2);

            ChartGradientColorCollection gradientColors = new ChartGradientColorCollection()
            {
                gradientColor
            };

            series2.ColorModel.CustomGradientColors = gradientColors;
            series2.XBindingPath = "Name";
            series2.YBindingPath = "Height";
            series2.EnableAnimation = true;
            series2.AnimationDuration = 1;
            series2.ItemsSource = Data;

series.EnableTooltip = true;
series2.EnableTooltip = true;

            chart.PrimaryAxis.ShowMajorGridLines = false;
            chart.SecondaryAxis.ShowMajorGridLines = false;
            chart.SecondaryAxis.IsVisible = false;

            chart.Series.Add(series);
            chart.Series.Add(series2);

this.Content = chart;

Michael Prabhu M · Answer

Hi Konstantinos, 
 
Yes, your solution is also the best, but we have another solution for this requirement. 
  
You can achieve this requirement in single series itself by changing the color of specific values (Offset) by using CustomGradientColor property of ColorModel in ChartSeries. Please refer to the below link to know more about the CustomGradientColor. 
  
Link: https://help.syncfusion.com/xamarin/sfchart/appearance#gradient-colors 
  
Code Snippet: 




  
SplineAreaSeries series = new SplineAreaSeries();  
series.ColorModel.Palette = ChartColorPalette.Custom;ChartGradientColor gradientColor1 = new ChartGradientColor() { StartPoint = new Point(0, 1), EndPoint = new Point(1, 1) }; 
  
ChartGradientStop stop1 = new ChartGradientStop() { Color = Color.Red, Offset = 0.34f };ChartGradientStop stop2 = new ChartGradientStop() { Color = Color.FromHex("#ffbe06"), Offset = 0.34f }; 
gradientColor1.GradientStops.Add(stop1);gradientColor1.GradientStops.Add(stop2);ChartGradientColorCollection gradientColors = new ChartGradientColorCollection(){     gradientColor1};series.ColorModel.CustomGradientColors = gradientColors;  
  
 
You can find the sample we prepared from the below link 
Sample: 139110 
Hope this helps. 
Thanks, 
Michael