Search code examples
c#avalonialivecharts

How to plot histogram without gaps?

I'm trying to plot a Histogram in Avalonia with C# using Livecharts2. However some empty space occurs between the columns.

How to avoid this empty space between columns?

For example in two column histogram the columns are shown as half columns on the left and right side of the screen, I want to have the columns in center of the screen.

Here's what I have done

  1. Create properties for the _histogram _xAxes, _yAxes, using MVVM Kit
[ObservableProperty]
private ObservableCollection<ISeries> _histogram;
    
[ObservableProperty]
private Axis[] _yAxes;
    
[ObservableProperty]
private Axis[] _xAxes;
  1. Set Default values for XAxes and YAxes
YAxes =
[
    new()
    {
        MinLimit = 0,
        MaxLimit = Math.Round( SampleSize/(WordSize * Math.Pow(2,WordSize)) * 1.5),
        SeparatorsPaint = new SolidColorPaint(new SKColor(200, 200, 200)),
        TicksPaint = new SolidColorPaint(new SKColor(35, 35, 35)),
    }
];

XAxes =
[
    new()
    {
        MinLimit = 0,
        MaxLimit = Math.Round( Math.Pow(2,WordSize)-1),
        SeparatorsPaint = new SolidColorPaint(new SKColor(200, 200, 200)),
        TicksPaint = new SolidColorPaint(new SKColor(35, 35, 35)),
    }
];
  1. Update the Histogram property each time the data is changed
var colors = new SolidColorPaint[]
{
    new(SKColors.Red),
    new(SKColors.Green),
    new(SKColors.Blue),
    new(SKColors.Yellow),
    new(SKColors.Cyan),
    new(SKColors.Magenta),
    new(SKColors.AliceBlue),
    new(SKColors.AntiqueWhite),
    new(SKColors.BlueViolet),
    new(SKColors.Brown)

};

Histogram =
[
    new ColumnSeries<int>
    {
        Values = _data;
        Name = "Histogram",
    }
    .OnPointMeasured(point =>
    {
        if (point.Visual is null) return;

        var paint = colors[point.Index % colors.Length];
        point.Visual.Fill = paint;
    })
];
  1. and Finally bind the Histogram, XAxes and YAxesin axaml
<avalonia:CartesianChart 
    Grid.Row="1"
    EasingFunction="{x:Null}"
    Series="{Binding Histogram}"
    XAxes="{Binding XAxes}"
    YAxes="{Binding YAxes}"
    ZoomMode="None" 
/>

The result is as the attached pictures enter image description here enter image description here

Solution

  • Thanks to @jdweng comment I can expand the view area by setting the XAxes.MinLimit to less than the actual min limit of x values and setting the XAxes.MaxLimit to more then the actual limit of x values.

    a Better way is to remove XAxes limits totally and leave them to be decided by livechart

    And to remove free x points between actual data setting XAxes.Lables will solve this problem. enter image description here