Search code examples
c#xamlxamarinxamarin.formsoxyplot

Adding MarkerStroke color adds thick lines when Smooth is true


I have following AreaSeries chart using OxyPlot in Xamarin Forms. It has three series.

  1. Smooth = true, MarkerStroke = default, Result is as expected
  2. Smooth = true, MarkerStroke = Yellow, Thick lines appear over the line
  3. Smooth = false, MarkerStroke = Yellow, Result is as expected

So, when I use Smooth = true and define a color for MarkerStroke, it adds an unwanted thick line. How to fix / work around it?

Note: In Line Series, it works as expected. The problem is only on area series.

enter image description here

Plot Model

public class MyOxyPlotModelData
{
        public PlotModel AreaModel { get; set; }

        public MyOxyPlotModelData()
        {
             AreaModel = CreateAreaChart();

        }

        public PlotModel CreateAreaChart()
        {
            PlotModel plotModel1 = new PlotModel { Title = "Area" };
            var valueAxisX = new LinearAxis
            {
                Position = AxisPosition.Bottom,
                AxislineColor = OxyColors.White,
                TicklineColor = OxyColors.White,
                TextColor = OxyColors.White,
                FontSize = 12,
                IsZoomEnabled = false,
                IsPanEnabled = false
            };

            var valueAxisY = new LinearAxis
            {
                Position = AxisPosition.Left,
                //Maximum = 15,
                //Minimum = 0,
                AxislineColor = OxyColors.White,
                TicklineColor = OxyColors.White,
                TextColor = OxyColors.White,
                FontSize = 12,
                IsZoomEnabled = false,
                IsPanEnabled = false
            };

            plotModel1.Axes.Add(valueAxisX);
            plotModel1.Axes.Add(valueAxisY);

            plotModel1.DefaultColors = new List<OxyColor>
            {
                OxyColors.Purple,
                OxyColors.DeepPink,
                OxyColors.Teal 
                //OxyColor.FromRgb(0x20, 0x4A, 0x87)
            };

            AreaSeries areaSeries1 = new AreaSeries
            {
                MarkerType = MarkerType.Circle,
                MarkerSize = 2,
                //MarkerStroke = OxyColors.White,
                StrokeThickness = 1,
                Smooth = true
            };
            areaSeries1.Points.Add(new DataPoint(0, 50));
            areaSeries1.Points.Add(new DataPoint(10, 140));
            areaSeries1.Points.Add(new DataPoint(20, 80));


            AreaSeries areaSeries2 = new AreaSeries
            {
                MarkerType = MarkerType.Circle,
                MarkerSize = 2,
                MarkerStroke = OxyColors.Yellow,
                StrokeThickness = 1,
                Smooth = true
            };
            areaSeries2.Points.Add(new DataPoint(0, 30));
            areaSeries2.Points.Add(new DataPoint(15, 150));
            areaSeries2.Points.Add(new DataPoint(20, 20));


            AreaSeries areaSeries3 = new AreaSeries
            {
                MarkerType = MarkerType.Circle,
                MarkerSize = 2,
                MarkerStroke = OxyColors.Yellow,
                StrokeThickness = 1,
                Smooth = false
            };
            areaSeries3.Points.Add(new DataPoint(0, 40));
            areaSeries3.Points.Add(new DataPoint(15, 110));
            areaSeries3.Points.Add(new DataPoint(20, 55));

            plotModel1.Series.Add(areaSeries1);
            plotModel1.Series.Add(areaSeries2);
            plotModel1.Series.Add(areaSeries3);


            return plotModel1;

        }
}

App. XAML.cs

public App()
    {
        InitializeComponent();
        var vSampleData = new MyOxyPlotModelData();

        MainPage = new OxyPlotNewSeries.MainPage { BindingContext = vSampleData };

    }

MainPage.XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:OxyPlotNewSeries"
             xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms" 
             x:Class="OxyPlotNewSeries.MainPage">

    <AbsoluteLayout>

        <oxy:PlotView Model="{Binding AreaModel}" BackgroundColor="#000000"
                  AbsoluteLayout.LayoutBounds="10,30,.9,.9"
                  AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional" />
    </AbsoluteLayout>

</ContentPage>

Solution

  • One option you have is to use TwoColorAreaSeries instead, as the problem you're describing does NOT happen for this series type.

    enter image description here

    TwoColorAreaSeries areaSeries2 = new TwoColorAreaSeries
    {
        MarkerType = MarkerType.Circle,
        MarkerSize = 5,
        MarkerStroke = OxyColors.Yellow,
        MarkerStrokeThickness = 5,
        StrokeThickness = 1,
        Smooth = true
    };
    areaSeries2.Points.Add(new DataPoint(0, 30));
    areaSeries2.Points.Add(new DataPoint(15, 140));
    areaSeries2.Points.Add(new DataPoint(20, 20));
    

    EDIT: Is it a bug? It could be... although judging by their own examples, it seems it was meant to be this way for drawing things like this:

    enter image description here

    and this:

    enter image description here