OxyPlot AreaSeries does not work horizontally

Question

I use AreaSeries from OxyPlot to plot vertical AreaSeries.

I apply a method that builds from a list different color AreaSeries. Here is the code:

private static void AddTriggerAreaSeries(PlotModel plotModel, int initialPoint, int endingPoint, int index)
        {
            var seriesArea = new AreaSeries();

            seriesArea.Title = "Instruction";
            seriesArea.Color = OxyColors.Transparent;
            seriesArea.Fill = TriggerColorList[index];

            //Draws vertically from bottom to top (0 -> 20)  
            //j referes to the second axis, the y axis in this case (vertical axis)     
            //The initial and ending points represent interval limits in which the area series is drawn

            for (var j = 0; j < 20; j++)
            {
                seriesArea.Points.Add(new DataPoint(initalPoint, j));
            }
            for (var j = 0; j < 20; j++)
            {
                seriesArea.Points.Add(new DataPoint(endingPoint, j));
            }
            plotModel.Series.Add(seriesArea);
        }

See picture below

The code works for vertical series. However when I try to plot the same thing horizontally it will not plot from an interval that I give.

Here is a sample of the code I use to plot the AreaSeries horizontally:

        // Basically same code that I used but calling seriesArea.Points.Add(new DataPoint(x, y)) reversed, such that the line goes in the x direction
        for (var j = 0; j < 20; j++)
        {
            seriesArea.Points.Add(new DataPoint(j, initalPoint));
        }
        for (var j = 0; j < 20; j++)
        {
            seriesArea.Points.Add(new DataPoint(j, endingPoint));
        }
        plotModel.Series.Add(seriesArea);

Here is a picture of the outcome of this code In this example the initialPoint=1 and endingPoint=2. I try to draw the interval [1,2], instead only it draws from interval [0,1] and for the ending point draws just a line:

score 3 · Answer 1 · answered May 20 '16 at 07:57

I changed the orientation of the plot and made the AreaSeries vertical.

Here is how it looks in the end: Here is the code: (I use MVVM pattern, I create a PlotModel withing a class than apply mothods to it)

private static void CreateColorBar(PlotModel plotModel, HemodynamicsMapping hemodynamicsMapping)
        {
            plotModel.InvalidatePlot(false);

            plotModel.Series.Clear();
            plotModel.Axes.Clear();

            // x axis
            plotModel.Axes.Add(new LinearAxis
            {
                Position = AxisPosition.Right,
                AbsoluteMaximum = 10,
                Minimum = 0,
                AbsoluteMinimum = 0,
                Maximum = 10,
                MajorTickSize = 0,
                MinorTickSize = 0,
                TextColor = OxyColors.Transparent
            });

            // y axis 
            plotModel.Axes.Add(new LinearAxis
            {
                Position = AxisPosition.Bottom,
                AbsoluteMaximum = 61,
                AbsoluteMinimum = 0,
                Maximum = 61,
                Minimum = 0,
                MajorTickSize = 0,
                MinorTickSize = 0,
                TextColor = OxyColors.Transparent
            });

            // z axis 
            // I only use this axis to show the labels you see in the picture
            plotModel.Axes.Add(new CategoryAxis
            {
                Position = AxisPosition.Bottom,
                AbsoluteMaximum = 8,
                AbsoluteMinimum = 0,
                Maximum = 8,
                Minimum = 0,
                MajorTickSize = 0,
                MinorTickSize = 0
            });

            var count = 0;
            //Adds series with colors form black to green
            for (var i = 3; i > 0; i--)
            {
                for (var j = 9; j >= 0; j--)
                {
                    AddColorBarArea(plotModel, i, j, hemodynamicsMapping, count, -1);
                    count++;
                }
            }

            //Adds green series 
            AddColorBarArea(plotModel, 1, 0, hemodynamicsMapping, count, 1);

            //Adds series with colors form green to white
            for (var i = 1; i < 5; i++)
            {
                for (var j = 0; j < 10; j++)
                {
                    AddColorBarArea(plotModel, i, j, hemodynamicsMapping, count, 1);
                    count++;
                }
            }

            plotModel.InvalidatePlot(true);
        }

        // Adds a series to the plot. There are 61 series since there are 61 colors.
        private static void AddColorBarArea(PlotModel plotModel,int i, int j, HemodynamicsMapping hemodynamicsMapping, int count, int negative)
        {
            var seriesArea = new AreaSeries();

            for (var k = 0; k < 500; k++)
            {
                seriesArea.Points.Add(new DataPoint(count, k));
            }
            for (var k = 0; k < 500; k++)
            {
                seriesArea.Points.Add(new DataPoint(count + 1, k));
            }

            seriesArea.Color = hemodynamicsMapping.ChannelColor(j, i, negative).ToOxyColor();
            seriesArea.Fill = hemodynamicsMapping.ChannelColor(j, i, negative).ToOxyColor();

            plotModel.Series.Add(seriesArea);
        }

However, the ideal position of this color bar should have been vertical, as I am tring to achieve something like this: (here picture)

score 1 · Answer 2 · edited Mar 17 '23 at 18:12

According to the AreaSeries documentation:

A AreaSeries shows an area between two sets of points, or between a set of point and a baseline.

I have to admit that's not much to go off of, but it does indicate that there are two sets of points. The Points property is one set and Points2 is the other. You're supposed to use them both (unless you intend to use the baseline). Also, unless you want the area to be something other than a rectangle, I believe you only need two points for each set as follows (note: I didn't test this, but it's similar to code I have tested):

 seriesArea.Points.Add(new DataPoint(0, initialPoint));
 seriesArea.Points.Add(new DataPoint(19, initialPoint));
 seriesArea.Points2.Add(new DataPoint(0, endPoint));
 seriesArea.Points2.Add(new DataPoint(19, endPoint));
 
 plotModel.Series.Add(seriesArea);

Furthermore, if the AreaSeries still isn't working for you, you could try RectangleAnnotation or PolygonAnnotation

Note: As of this writing, there is nothing documented for RectangleAnnotaion or PolygonAnnotation besides the fact that they exist.

OxyPlot AreaSeries does not work horizontally

2 Answers2