LiveCharts2 - How to Hide gaps on X-scale of Candle Stick chart?

Question

[WHAT IS THE PROBLEM]

You can see gaps/spaces between ploted candlestick bars in the candlestick chart below, This is because the Datas inside XAxes / Axi are in timeframe of 5 minutes, not in day. In each day it has data from 9hrs till 18hrs, depends on what symbol was chosen.

See the image: https://github.com/beto-rodriguez/LiveCharts2/assets/135464720/7550b460-6b58-4065-a6e3-41796a0a5369

[WHAT I WANT]

How to hide/remove this gaps?

[VERSIONS]

This is LiveChart2 - 20.0.-rc2 for AvaloniaUI 11.0.5. Windows 11.

[THE CODE]

ViewModel:

Series = new ISeries[]
  {
    new CandlesticksSeries<FinancialPoint>
    {
     MaxBarWidth = 24, //12
    Values = data
     }
  };

  XAxes = new[]
  {
  new Axis
  {
      CrosshairLabelsBackground = SKColors.DarkOrange.AsLvcColor(),
      CrosshairLabelsPaint = new SolidColorPaint(SKColors.DarkRed, 1),
      CrosshairPaint = new SolidColorPaint(SKColors.DarkOrange, 1),
      ShowSeparatorLines = false,
      Position = LiveChartsCore.Measure.AxisPosition.Start,
      LabelsRotation = 0,  
      LabelsPaint = new SolidColorPaint(SKColors.LightSlateGray),
      TextSize = 12,
      SeparatorsPaint = new SolidColorPaint(SKColors.LightSlateGray)
      {
          StrokeThickness = 1,
          PathEffect = new DashEffect(new float[] { 3, 3 })
      },
      Labeler = value => (string) new DateTime((long)value).ToString("dd/MM/yyyy") + new DateTime((long)value).ToString("HH:mm"),
      UnitWidth = TimeSpan.FromMinutes(5).Ticks 
  }
};

  SKColor s_crosshair = new(255, 171, 145);
  Func<double, string> formatFunc = (x) => string.Format("{0:0.00}", x);

  YAxes = new[]
  {
  new Axis
  {
      TextSize = 12,
      LabelsPaint = new SolidColorPaint(SKColors.LightSlateGray),
      CrosshairLabelsBackground = SKColors.DarkOrange.AsLvcColor(),
      CrosshairLabelsPaint = new SolidColorPaint(SKColors.DarkRed, 1),
      CrosshairPaint = new SolidColorPaint(SKColors.DarkOrange, 1),
      CrosshairSnapEnabled = false, // snapping is also supported
      SeparatorsPaint = new SolidColorPaint(SKColors.LightSlateGray)
      {
          StrokeThickness = 1,
      },
      ShowSeparatorLines  = true,
      Position = LiveChartsCore.Measure.AxisPosition.End
  }
};

AXAML:

      <lvc:CartesianChart AutoUpdateEnabled="True" Series="{Binding Series}" XAxes="{Binding XAxes}"  YAxes="{Binding YAxes}" ZoomMode="X" >
        <lvc:CartesianChart.ContextMenu>
          <ContextMenu>
            <MenuItem Header="Menu item 1" />
            <MenuItem Header="Menu item 2" />
            <Separator />
            <MenuItem Header="Menu item 3" />
          </ContextMenu>
        </lvc:CartesianChart.ContextMenu>      
      </lvc:CartesianChart>

Answer 1

I think you need to ensure that your data set does not contain any missing points for the intervals you are plotting.

So you should take a look in your data collection that you bind to Values in CandlesticksSeries contains a FinancialPoint for every expected 5-minute interval.

So, I am not a expert but I think you have set the UnitWidth property of your X-axis to TimeSpan.FromMinutes(1).Ticks. Since your data points are 5 minutes apart, try setting the UnitWidth to TimeSpan.FromMinutes(5).Ticks to see if it affects the rendering of the gaps.

Something like that:

XAxes = new[]
{
  new Axis
  {
      // ... the rest of you code ...

      // Set the unit width to 5 minutes
      UnitWidth = TimeSpan.FromMinutes(5).Ticks 
  }
};