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;

2. 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)),
    }
];

3. 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;
    })
];

4. 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

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;

2. 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)),
    }
];

3. 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;
    })
];

4. 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

• c#
• avalonia
• livecharts

• To have the colors in the center of the screen you need to change the MIN and MAX values. To remove the spaces between the values you need to change the number of ticks on the X-Axis. – jdweng Commented Feb 11 at 13:25
• @jdweng by MIN and MAX values, do you mean the MinLimit & MaxLimit of XAxes ? but these are the exact values I need, 0 is my minimum x value and 3 in the 1st graph or 1 in the 2nd graph. – Hossam Alzomor Commented Feb 11 at 15:13
• 1 How can you put the bars in the center if they are at the min and max values? You said "I want to have the columns in center of the screen". – jdweng Commented Feb 11 at 18:03
• @jdweng, setting XAxes.MinLimit to value less than the actual min limit and XAxes.MaxLimit to value more than the actual will solve the problem. but what solves the root of the problem, is removing the XAxes limits totally and setting labels for XAxes – Hossam Alzomor Commented Feb 12 at 10:08

1 Answer 1

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.