Candles width not adjusting properly (candles overlap) in Candlesticksseries

[BigCodXr]

Hello. I'm modifying some code on an older program to use Livecharts v2. When plotting a CandlesticksSeries just like in the example here https://livecharts.dev/docs/WPF/2.0.0-rc2/samples.financial.basicCandlesticks and when reducing the size of the window, candles do not get their width adjusted properly. Candles remain quite large and quickly overlap. This is as if a minimum width for each candle was set and this number was quite large (10px or so). This behavior does not happen with the ColumnSeries. In small window, columns automatically reduce their width much more. I have a CartesianChart that shows 2 series on the top of each other. One series is the CandlesticksSeries representing stock price (OLHC), the other series is a ColumnSeries representing traded volumes. The behavior in each case can be easily noticed. With Livecharts v0 I did not have this issue. Does anybody know what could be the problem? Is there a quick fix or is there a bug? Thank you all for this great piece of software.

[TomDeFord]

I came across the same issue. The ColumnSeries inherits from BarSeries which has a padding property; unfortunately the CandleSticks don't have one. The code below is the smallest I could make my solution. If you want to add a property to the series class to nicely define the margin amount (on a per instance basis) it requires overriding of several LiveCharts classes.

I prefer the margin as a percentage of the width but the fixed width margin is there too.

Enjoy.

using LiveChartsCore.Drawing;
using SkiaSharp;

namespace LiveChartsCore.SkiaSharpView.Drawing.Geometries;

public class CandlestickGeometryHack : CandlestickGeometry, IFinancialGeometry<SkiaSharpDrawingContext>
{
    public override void OnDraw(SkiaSharpDrawingContext context, SKPaint paint)
    {
        var w = Width;
        var margin = w * 0.1f;// Margin as a percentage of width;
        //margin = 2.0f; // Margin as fixed width

        margin = Math.Max(margin, 1.0f);

        var cg = new CandlestickGeometry()
        {
            X = this.X + margin,
            Width = w - margin * 2.0f,

            Y = this.Y,
            Open = this.Open,
            Close = this.Close,
            Low = this.Low
        };

        cg.OnDraw(context, paint);
    }
}

In your code use something like this:

        var candleStickSeries = new CandlesticksSeries<FinancialPoint, CandlestickGeometryHack, LabelGeometry>()
        {
              Name = "Test",
              //Values = .....
        };

[BigCodXr]

Thank you so much for your reply!!!! It's really nice of you. I will try your solution as soon as I have the time. I'm sure it's gonna work. Thank you for sharing your hard work!

[BigCodXr]

I tried the hack above and I can't get it to work. It seems it has no effect. When reducing the width of the view, the candles still overlap. Of course, the code below is just an example with a few candle values. There's usually no reason to squeeze a view like that in normal use. But I also tried with 1min candles for an entire day on a larger view and the overlapping effect is still there and it is very annoying.

Maybe I don't use the right code for the XAxes? Please help.

Here's my code:

public class LvcViewModel : BaseViewModel
{
    public LvcViewModel() 
    {
        var data = new ObservableCollection<FinancialPoint>
        {
        new(new DateTime(2021, 1, 1), 523, 500, 450, 400),
        new(new DateTime(2021, 1, 2), 500, 450, 425, 400),
        new(new DateTime(2021, 1, 3), 490, 425, 400, 380),
        new(new DateTime(2021, 1, 4), 420, 400, 420, 380),
        new(new DateTime(2021, 1, 5), 520, 420, 490, 400),
        new(new DateTime(2021, 1, 6), 580, 490, 560, 440),
        new(new DateTime(2021, 1, 7), 570, 560, 350, 340),
        new(new DateTime(2021, 1, 8), 380, 350, 380, 330),
        new(new DateTime(2021, 1, 9), 440, 380, 420, 350),
        new(new DateTime(2021, 1, 10), 490, 420, 460, 400),
        new(new DateTime(2021, 1, 11), 520, 460, 510, 460),
        new(new DateTime(2021, 1, 12), 580, 510, 560, 500),
        new(new DateTime(2021, 1, 13), 600, 560, 540, 510),
        new(new DateTime(2021, 1, 14), 580, 540, 520, 500),
        new(new DateTime(2021, 1, 15), 580, 520, 560, 520),
        new(new DateTime(2021, 1, 16), 590, 560, 580, 520),
        new(new DateTime(2021, 1, 17), 650, 580, 630, 550),
        new(new DateTime(2021, 1, 18), 680, 630, 650, 600),
        new(new DateTime(2021, 1, 19), 670, 650, 600, 570),
        new(new DateTime(2021, 1, 20), 640, 600, 610, 560),
        new(new DateTime(2021, 1, 21), 630, 610, 630, 590)
        };
       
        Series = new ObservableCollection<ISeries>
        {
            new CandlesticksSeries<FinancialPoint, CandlestickGeometryHack, LabelGeometry>
            {
                Values = data
                    .Select(x => new FinancialPoint(x.Date, x.High, x.Open, x.Close, x.Low))
                    .ToArray(),
            }
        };

        XAxes = new[]
        {
            new DateTimeAxis(TimeSpan.FromDays(1), date => date.ToString("MMMM dd"))
        };
    }

    public Axis[] XAxes { get; set; }

    public ObservableCollection<ISeries> Series { get; set; }
}

The BaseViewModel just implements INotifyPropertyChanged. Not worth mentionning.

The xaml file

    <UserControl.DataContext>
        <local:LvcViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <lvc:CartesianChart Series="{Binding Series}" XAxes="{Binding XAxes}"></lvc:CartesianChart>
    </Grid>
</UserControl>

And the results

[TomDeFord]

Ah yea, sorry. My solution is for WinForm. I haven't had chance to dig into the WPF code but there should be a commonality between the code so the fix should be similar if one searches for it.

[BigCodXr]

I digged a little deeper in LiveCharts source code and came to the conclusion that the above hack proposed by TomDeFord should also work with WPF. After some debugging I found the culprit. The default strocke thickness used for candlestisck is quite large. And it is not taken into account for the calculation of the width of each candle. This means that the strocke of each candle covers the margin created by the hack above. So make sure that you set the strocke thickness to a minimum (1 for instance).

            var candleSeries = new CandlesticksSeries<FinancialPointI, CandlestickGeometryHack, LabelGeometry>
            {
                Values = _candlesticksSeriesValues,
                UpFill = new SolidColorPaint(SKColors.Green),
                UpStroke = new SolidColorPaint(SKColors.Green) { StrokeThickness = 1 },
                DownFill = new SolidColorPaint(SKColors.Red),
                DownStroke = new SolidColorPaint(SKColors.Red) { StrokeThickness = 1 }
            };

Here's the result

A big thank you to TomDeFord for this hack.