Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom Color Range with OxyPlot ScatterPlot

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

like image 781
Mantracker Avatar asked Oct 28 '25 08:10

Mantracker


1 Answers

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));
like image 126
jsanalytics Avatar answered Oct 31 '25 00:10

jsanalytics



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!