Even more chart customisation

Hi everyone, I would also like to know if there is any way to combine backtesting with TradingView's charting API when running LEAN locally.. That would be cool.

Hi EduardV,

Yes, this is possible. For a simple example, we can follow this workflow after installing Lightweight Charts:

1. Calculate the equity over time (see example calculation or get from the bin/Debug directory)
2. At the end of the backtest, log the equity over time data
3. Load the equity over time data into a javascript file by following the examples given by TradingView
4. Open the javascript file in a browser

Best,
Derek Melchin

public abstract class TradingViewModels
    {
        [Serializable]
        public class Trade
        {
            public long EntryTime { get; set; }
            public long ExitTime { get; set; }
            public decimal EntryPrice { get; set; }
            public decimal ExitPrice { get; set; }
            public string Side { get; set; }

            public Trade(long entryTime, long exitTime, decimal entryPrice, decimal exitPrice, string side)
            {
                EntryTime = entryTime;
                ExitTime = exitTime;
                EntryPrice = entryPrice;
                ExitPrice = exitPrice;
                Side = side;
            }
        }

        [Serializable]
        public class Bar
        {
            public long UnixTime { get; set; }
            public decimal Open { get; set; }
            public decimal High { get; set; }
            public decimal Low { get; set; }
            public decimal Close { get; set; }

            public Bar(decimal open, decimal high, decimal low, decimal close, long unixTime)
            {
                Open = open;
                High = high;
                Low = low;
                Close = close;
                UnixTime = unixTime;
            }

            public Bar()
            {
                
            }
        }

public static void DailyChartExport(QCAlgorithm algorithm, Dictionary<Symbol, RollingWindow<QuoteBar>> windows, Dictionary<string, List<Bracket>> symbolBrackets)
        {
            foreach (var symbol in symbolBrackets.Keys)
            {
                if (symbolBrackets[symbol].Count == 0)
                {
                    continue;
                }
                // Check if the symbol exists in the windows dictionary
                if (!windows.ContainsKey(symbol))
                {
                    continue;
                }

                // Extract the correct RollingWindow for the symbol and convert to a List
                var rawBars = windows[symbol].ToList().Where(b => b.Time <= algorithm.Time && b.Time > algorithm.Time.AddHours(-25));

                var tradesList = symbolBrackets[symbol].Select(bracket => bracket.Trade).OrderBy(t => t.EntryTime).ToList();

                var bars = rawBars.Select(qb => new TradingViewModels.Bar
                {
                    UnixTime = ((DateTimeOffset)qb.Time).ToUnixTimeSeconds(),
                    Open = qb.Open,
                    High = qb.High,
                    Low = qb.Low,
                    Close = qb.Close
                })
                .OrderBy(b => b.UnixTime)
                .ToList();

                // Logic for exporting to HTML
                var templatePath = Path.Combine(Paths.BaseDirectory!, "Html Templates", "trade_template.html");
                var html = File.ReadAllText(templatePath);

                var tradesJson = JsonConvert.SerializeObject(tradesList, Formatting.Indented);
                var barsJson = JsonConvert.SerializeObject(bars, Formatting.Indented);

                html = html.Replace("{TRADES_DATA}", tradesJson);
                html = html.Replace("{CANDLESTICK_DATA}", barsJson);

                // Determine the save location based on live or backtesting mode
                var exportDirectory = Path.Combine(Paths.StrategyExportsDirectory, "Daily Chart Exports");
                var directoryName = algorithm.LiveMode ? "Live Trades" : "BackTest Trades";
                var directoryPath = Path.Combine(exportDirectory, directoryName);
                var fileName = $"{symbol}_{algorithm.Time.Date.AddDays(-1):yyyy_MM_dd}.html";
                var newHtmlPath = Path.Combine(directoryPath, fileName);

                if (!Directory.Exists(directoryPath))
                {
                    Directory.CreateDirectory(directoryPath);
                }

                File.WriteAllText(newHtmlPath, html);
            }
        }

public abstract class TradingViewModels
    {
        [Serializable]
        public class Trade
        {
            public long EntryTime { get; set; }
            public long ExitTime { get; set; }
            public decimal EntryPrice { get; set; }
            public decimal ExitPrice { get; set; }
            public string Side { get; set; }

            public Trade(long entryTime, long exitTime, decimal entryPrice, decimal exitPrice, string side)
            {
                EntryTime = entryTime;
                ExitTime = exitTime;
                EntryPrice = entryPrice;
                ExitPrice = exitPrice;
                Side = side;
            }
        }

        [Serializable]
        public class Bar
        {
            public long UnixTime { get; set; }
            public decimal Open { get; set; }
            public decimal High { get; set; }
            public decimal Low { get; set; }
            public decimal Close { get; set; }

            public Bar(decimal open, decimal high, decimal low, decimal close, long unixTime)
            {
                Open = open;
                High = high;
                Low = low;
                Close = close;
                UnixTime = unixTime;
            }

            public Bar()
            {
                
            }
        }

public static void DailyChartExport(QCAlgorithm algorithm, Dictionary<Symbol, RollingWindow<QuoteBar>> windows, Dictionary<string, List<Bracket>> symbolBrackets)
        {
            foreach (var symbol in symbolBrackets.Keys)
            {
                if (symbolBrackets[symbol].Count == 0)
                {
                    continue;
                }
                // Check if the symbol exists in the windows dictionary
                if (!windows.ContainsKey(symbol))
                {
                    continue;
                }

                // Extract the correct RollingWindow for the symbol and convert to a List
                var rawBars = windows[symbol].ToList().Where(b => b.Time <= algorithm.Time && b.Time > algorithm.Time.AddHours(-25));

                var tradesList = symbolBrackets[symbol].Select(bracket => bracket.Trade).OrderBy(t => t.EntryTime).ToList();

                var bars = rawBars.Select(qb => new TradingViewModels.Bar
                {
                    UnixTime = ((DateTimeOffset)qb.Time).ToUnixTimeSeconds(),
                    Open = qb.Open,
                    High = qb.High,
                    Low = qb.Low,
                    Close = qb.Close
                })
                .OrderBy(b => b.UnixTime)
                .ToList();

                // Logic for exporting to HTML
                var templatePath = Path.Combine(Paths.BaseDirectory!, "Html Templates", "trade_template.html");
                var html = File.ReadAllText(templatePath);

                var tradesJson = JsonConvert.SerializeObject(tradesList, Formatting.Indented);
                var barsJson = JsonConvert.SerializeObject(bars, Formatting.Indented);

                html = html.Replace("{TRADES_DATA}", tradesJson);
                html = html.Replace("{CANDLESTICK_DATA}", barsJson);

                // Determine the save location based on live or backtesting mode
                var exportDirectory = Path.Combine(Paths.StrategyExportsDirectory, "Daily Chart Exports");
                var directoryName = algorithm.LiveMode ? "Live Trades" : "BackTest Trades";
                var directoryPath = Path.Combine(exportDirectory, directoryName);
                var fileName = $"{symbol}_{algorithm.Time.Date.AddDays(-1):yyyy_MM_dd}.html";
                var newHtmlPath = Path.Combine(directoryPath, fileName);

                if (!Directory.Exists(directoryPath))
                {
                    Directory.CreateDirectory(directoryPath);
                }

                File.WriteAllText(newHtmlPath, html);
            }
        }

This will Load from your saved data (trades are converted from Statistics.Trades using trade matching logic with the Algorithm.Trade Builder, (that logic is not included as I modified the Lean engine for this.

There is currently a bug with scaling charts and possibly something to do with Time conversion as I am not getting perfect charts yet, this allows to export charts with all trades for the day during live trading and backtesting and since it is standalone version it doesnt require installing lightweight charts, charts could just be forwarded from a linux node to an email address or some other method.

I am not sure how it will work with the cmd or we version but something could be done,

this doesnt update charts in real time but rather generates charts from saved data at specified times,

it uses JS place holders in a template html file and replaces these with my list of bars and trades to be plotted using JS parsing functions built into the html doc.

the problem with backtesting and trade matching on standard engine is that on large backtests the TradeBuilder.Closed Trades IEnumerable is a huge collection.

I built a second list of closed trades: private readonly Dictionary<Symbol, List<Trade>> _unmanagedTrades = new Dictionary<Symbol, List<Trade>>();

From this list I can use the following to shorten the ClosedTrade lists per symbol after trade matching (without affecting the original list used by the engine), shortening the lists has a massive impact on cycling the lists for trade matching. (I also needed this feature for ML training in relation to matching trades to entry and exit data, it really should be built into the Lean engine in the future as it allows accurate matching of Lean Trades to user criteria without much overhead.

public void RemoveTrade(Symbol symbol, Trade trade){    lock (_unmanagedTrades)    {        _unmanagedTrades[symbol].Remove(trade);    }}

Its a work in progress so I am working out bugs, once i learn html and js I will make a live version to stream from my nodes.

<!DOCTYPE html><html><head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />    <title>Lightweight Charts Customization Tutorial</title>    <!-- Adding Google Font -->    <link rel="preconnect" href="https://fonts.googleapis.com" />    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />    <!-- Adding the standalone version of Lightweight charts -->    <script type="text/javascript" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>    <style>        body {            padding: 0;            margin: 0;            background-color: #111; /* Matching the chart background color */        }    </style></head><body><div id="container" style="position: absolute; width: 100%; height: 100%"></div><div id="candlestick-data">{CANDLESTICK_DATA}</div><div id="trades-data">{TRADES_DATA}</div><script type="text/javascript">    const chart = LightweightCharts.createChart(document.getElementById('container'), {        layout: {            background: { color: '#222' },            textColor: '#DDD',        },        grid: {            vertLines: { color: '#444' },            horzLines: { color: '#444' },        },    });    let CANDLESTICK_DATA;    let TRADES_DATA;    try {        CANDLESTICK_DATA = JSON.parse(document.getElementById('candlestick-data').textContent);        TRADES_DATA = JSON.parse(document.getElementById('trades-data').textContent);    } catch (e) {        console.error("Parsing error: ", e);    }    function parseCandlestickData(data) {        return data.map(function (bar) {            return {                time: bar.UnixTime,                open: bar.Open,                high: bar.High,                low: bar.Low,                close: bar.Close,            };        });    }    function parseTradeData(tradeData) {        return tradeData.map(function (trade) {           return {               entryTime: trade.EntryTime,               exitTime: trade.ExitTime,               entryPrice: trade.EntryPrice,               exitPrice: trade.ExitPrice,               side: trade.Side.toLowerCase(),           };        });    }    const candlestickData = parseCandlestickData(CANDLESTICK_DATA);    const tradesData = parseTradeData(TRADES_DATA);    function generateMarkers(tradesData) {        let count = 0;        let markers = [];        tradesData.forEach((trade) => {            count++;            if (trade.side === 'long' || trade.side === 'short') {                markers.push({                    time: trade.entryTime,                    position: trade.side === 'long' ? 'belowBar' : 'aboveBar',                    color: trade.side === 'long' ? '#008000' : '#FF0000',                    shape: trade.side === 'long' ? 'arrowUp' : 'arrowDown',                    text: `#${count} Entry ${trade.side} @ ${trade.entryPrice} ${trade.entryTime}`                });                markers.push({                    time: trade.exitTime,                    position: trade.side === 'long' ? 'aboveBar' : 'belowBar',                    color: trade.side === 'long' ? '#FF0000' : '#008000',                    shape: trade.side === 'long' ? 'arrowDown' : 'arrowUp',                    text: `#${count} Exit ${trade.side} @ ${trade.exitPrice} ${trade.exitTime}`                });            }        });        return markers;    }    const markers = generateMarkers(tradesData);    function handleResize() {        chart.resize(window.innerWidth, window.innerHeight);    }    window.addEventListener('resize', handleResize);    chart.priceScale().applyOptions({ borderColor: '#71649C' });    chart.timeScale().applyOptions({        borderColor: '#71649C',        timeVisible: true,    });    chart.applyOptions({        crosshair: {            mode: LightweightCharts.CrosshairMode.Normal,            vertLine: {                width: 8,                color: '#C3BCDB44',                style: LightweightCharts.LineStyle.Solid,                labelBackgroundColor: '#9B7DFF',            },            horzLine: {                color: '#9B7DFF',                labelBackgroundColor: '#9B7DFF',            },        },    });    const mainSeries = chart.addCandlestickSeries();    mainSeries.setData(candlestickData);    mainSeries.setMarkers(markers);    console.log(candlestickData, markers);    chart.fitContent();</script></body></html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
    <title>Lightweight Charts Customization Tutorial</title>
    <!-- Adding Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
    <!-- Adding the standalone version of Lightweight charts -->
    <script type="text/javascript" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #111; /* Matching the chart background color */
        }
    </style>
</head>

<body>
<div id="container" style="position: absolute; width: 100%; height: 100%"></div>
<div id="candlestick-data">{CANDLESTICK_DATA}</div>
<div id="trades-data">{TRADES_DATA}</div>

<script type="text/javascript">
    const chart = LightweightCharts.createChart(document.getElementById('container'), {
        layout: {
            background: { color: '#222' },
            textColor: '#DDD',
        },
        grid: {
            vertLines: { color: '#444' },
            horzLines: { color: '#444' },
        },
    });

    let CANDLESTICK_DATA;
    let TRADES_DATA;

    try {
        CANDLESTICK_DATA = JSON.parse(document.getElementById('candlestick-data').textContent);
        TRADES_DATA = JSON.parse(document.getElementById('trades-data').textContent);
    } catch (e) {
        console.error("Parsing error: ", e);
    }

    function parseCandlestickData(data) {
        return data.map(function (bar) {
            return {
                time: bar.UnixTime,
                open: bar.Open,
                high: bar.High,
                low: bar.Low,
                close: bar.Close,
            };
        });
    }

    function parseTradeData(tradeData) {
        return tradeData.map(function (trade) {
           return {
               entryTime: trade.EntryTime,
               exitTime: trade.ExitTime,
               entryPrice: trade.EntryPrice,
               exitPrice: trade.ExitPrice,
               side: trade.Side.toLowerCase(),
           };
        });
    }

    const candlestickData = parseCandlestickData(CANDLESTICK_DATA);
    const tradesData = parseTradeData(TRADES_DATA);

    function generateMarkers(tradesData) {
        let count = 0;
        let markers = [];

        tradesData.forEach((trade) => {
            count++;

            if (trade.side === 'long' || trade.side === 'short') {
                markers.push({
                    time: trade.entryTime,
                    position: trade.side === 'long' ? 'belowBar' : 'aboveBar',
                    color: trade.side === 'long' ? '#008000' : '#FF0000',
                    shape: trade.side === 'long' ? 'arrowUp' : 'arrowDown',
                    text: `#${count} Entry ${trade.side} @ ${trade.entryPrice} ${trade.entryTime}`
                });

                markers.push({
                    time: trade.exitTime,
                    position: trade.side === 'long' ? 'aboveBar' : 'belowBar',
                    color: trade.side === 'long' ? '#FF0000' : '#008000',
                    shape: trade.side === 'long' ? 'arrowDown' : 'arrowUp',
                    text: `#${count} Exit ${trade.side} @ ${trade.exitPrice} ${trade.exitTime}`
                });
            }
        });
        return markers;
    }

    const markers = generateMarkers(tradesData);

    function handleResize() {
        chart.resize(window.innerWidth, window.innerHeight);
    }

    window.addEventListener('resize', handleResize);

    chart.priceScale().applyOptions({ borderColor: '#71649C' });
    chart.timeScale().applyOptions({
        borderColor: '#71649C',
        timeVisible: true,
    });
    chart.applyOptions({
        crosshair: {
            mode: LightweightCharts.CrosshairMode.Normal,
            vertLine: {
                width: 8,
                color: '#C3BCDB44',
                style: LightweightCharts.LineStyle.Solid,
                labelBackgroundColor: '#9B7DFF',
            },
            horzLine: {
                color: '#9B7DFF',
                labelBackgroundColor: '#9B7DFF',
            },
        },
    });
    const mainSeries = chart.addCandlestickSeries();
    mainSeries.setData(candlestickData);
    mainSeries.setMarkers(markers);
    console.log(candlestickData, markers);
    chart.fitContent();
</script>
</body>
</html>

sorry uploading html is a mess