It lags a lot in html and saveJPG hangs

[hosseinkhojany]

First of all, thank you for the effort you put into making this open source project

But this project is practically unusable on 50k candles

When a new page opens in the browser, it lags a lot and saveJPG also hangs. Is there a solution to use gpu for chart rendering or pagination (lazy loading)?

My example usage:

Details

public override void OnEndOfAlgorithm()
        {
            List bars = qcChart.Series[xauusdSymbol.Value].Values.OfType().ToList().Take(51).ToList();
            if (bars.Count == 0)
            {
                Log("No data to plot.");
                return;
            }
            GenericChart chart = Chart2D.Chart.Candlestick(
                bars.Select(x => x.Open ?? 0),
                bars.Select(x => x.High ?? 0),
                bars.Select(x => x.Low ?? 0),
                bars.Select(x => x.Close ?? 0),
                bars.Select(x => x.Time),
                ShowXAxisRangeSlider: new FSharpOption(false)
                );
        LinearAxis xAxis = new LinearAxis();
        xAxis.SetValue("title", "Time");
        xAxis.SetValue("resizable", true);
        
        LinearAxis yAxis = new LinearAxis();
        yAxis.SetValue("title", "Price");
        yAxis.SetValue("resizable", true);
        if (bars.Count > 100)
        {
            xAxis.SetValue("range", new object[] { bars[^50].Time, bars[^1].Time });
            yAxis.SetValue("range", new object[] { bars[^100].Low, bars[^1].High });
        }
        else
        {
            yAxis.SetValue("range", new object[] { bars[^(bars.Count - 1)].Low, bars[^1].High });
            xAxis.SetValue("range", new object[] { bars[^50].Time, bars[^1].Time });
        }

        chart.WithTemplate(ChartTemplates.plotly);
        chart.WithSize(1000, 800);
        chart.WithTitle(xauusdSymbol.Value);
        
        chart.WithXAxis(xAxis);
        chart.WithYAxis(yAxis);
        
        List<Shape> shapes = new List<Shape>();
        foreach (var point in qcChart.Series[plotSeriesBullish].Values.Take(10))
        {
            if (point is Candlestick candlestick)
            {
                chart.WithAnnotation(Annotation.init<DateTime, decimal, int, int, int, int, double, int, int, int>(
                        X: new FSharpOption<DateTime>(candlestick.Time),
                        Y: new FSharpOption<decimal>(candlestick.Close ?? 0),
                        Text: new FSharpOption<string>(plotSeriesBullish),
                        BGColor: new FSharpOption<Color>(Color.fromString("white"))
                    )
                );


                // Helper function to convert DateTime to milliseconds since epoch
                double DateTimeToMilliseconds(DateTime dateTime)
                {
                    return (dateTime.ToUniversalTime() - new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).TotalMilliseconds;
                }

                // var tpShape = Shape.init(
                //     ShapeType: new FSharpOption<StyleParam.ShapeType>(StyleParam.ShapeType.Rectangle),
                //     X0: new FSharpOption<double>(DateTimeToMilliseconds(candlestick.Time)),
                //     X1: new FSharpOption<double>(DateTimeToMilliseconds(candlestick.Time.AddHours(1))),
                //     Y0: new FSharpOption<decimal>(candlestick.Close ?? 0),
                //     Y1: new FSharpOption<decimal>((candlestick.Close ?? 0) + 20),
                //     FillColor: new FSharpOption<Color>(Color.fromString("rgba(0, 255, 0, 0.2)")),
                //     Layer: new FSharpOption<StyleParam.Layer>(StyleParam.Layer.Below),
                //     Line: Line.init(Width: new FSharpOption<double>(1))
                // );
                // shapes.Add(tpShape);

            }
        }
        chart.WithShapes(shapes);
        // chart.SaveJPG("C:\\Users\\PSG\\Desktop\\chart.jpg", EngineType: new FSharpOption<ExportEngine>(ExportEngine.PuppeteerSharp), 800, 100);
        HTML.CreateChartHTML(GenericChart.toChartHTML(chart), GenericChartExtensions.GetLayout(chart).ToString(), null, PlotlyJSReference.Full);
        chart.Show();
    }

[kMutagene]

Hi there,

Renderer performance sadly is not something we have control over in this lib, as that is done via plotly.js.

Quick google search seems to me that there is no easy fix for this, and js/python users encounter the same problems as you (see for example here )