4

I've been experimenting with implementing a scatter plot with oxyplot on top of my line series. Basically, I would love to color code some points on my scatter plot.

I already have the graph below created with a scatter plot and a line series:

enter image description here

The above point colors are created following tutorial here. Basically, I added a RangeColorAxis. The X-Axis from this graph ranges from 0 to 1 and creates the colors, as below:

        var customAxis = new RangeColorAxis { Key = "customColors" };
        customAxis.AddRange(0, 0.1, OxyColors.Red);
        customAxis.AddRange(0.1, 0.2, OxyColors.Yellow);
        customAxis.AddRange(0.2, 0.3, OxyColors.Green);
        customAxis.AddRange(0.3, 1, OxyColors.Orange);
        customAxis.AddRange(1, 1.1, OxyColors.Blue);
        OxyPlotModel.Axes.Add(customAxis);

But now, I would also like to add some color progression in the graph above. For example, from point 0.0 to 0.1, I would like color to progress from LightRed to DarkRed. From 0.1 to 0.2, I would like to transition from Light Yellow to Bright Yellow. From 0.2 to 0.3, I would like to transition from Light Green to Dark Green. And so on.

Is it possible to do this in Oxyplot? Thanks

jsanalytics
  • 13,058
  • 4
  • 22
  • 43
Mantracker
  • 613
  • 10
  • 22

1 Answers1

5

Use LinearColorAxis:

enter image description here

public partial class MainWindow : Window
{
    public PlotModel Model { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        Model = new PlotModel();

        var axis1 = new LinearColorAxis();
        axis1.Key = "ColorAxis";
        axis1.Maximum = 2 * Math.PI;
        axis1.Minimum = 0;
        axis1.Position = AxisPosition.Top;
        Model.Axes.Add(axis1);

        var s1 = new ScatterSeries();
        s1.ColorAxisKey = "ColorAxis";
        s1.MarkerSize = 8;
        s1.MarkerType = MarkerType.Circle;

        for (double x = 0; x <= 2 * Math.PI; x += 0.1)
            s1.Points.Add(new ScatterPoint(x, Math.Sin(x), double.NaN, x));

        Model.Series.Add(s1);

        DataContext = this;
    }
}

EDIT: You can also define your own palette:

enter image description here

axis1.Palette.Colors.Clear();

for (int i = 0; i < 256; i++)
    axis1.Palette.Colors.Add(OxyColor.FromArgb((byte)i, 255, 0, 0));
jsanalytics
  • 13,058
  • 4
  • 22
  • 43
  • Hey jstreet, is it possible for specify what color should the range be in for values in LinearColorAxis. For your example, it is transitioning all the way from blue to red between 0 and 2 * PI. What if I only want to transition from say light Red to dark Red from 0 to 2* PI – Mantracker May 26 '17 at 17:12
  • Please see my **EDIT**. – jsanalytics May 26 '17 at 19:43