TradingView.Blazor

Simple component for basic TradingView chart in Blazor supporting OHLC candle, volume and markers.

Preview

Getting Started

1. Include TradingView's lightweight-charts library in the <head>section of your _Host.cs for Blazor Server or wwwroot/index.html for WebAssembly file:

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

2a. Add the chart to your page where you would like the chart to display with a reference:

<TradingViewChart @ref=myChart />

2b. Define the reference in the @code section of your razor page

@code {
    TradingViewChart? myChart;
}

3. Prepare your data in the format of List<TradingView.Blazor.Models.Ohlcv>

public class Ohlcv
{
    public DateTime Time { get; set; }
    public decimal Open {  get; set; }
    public decimal High { get; set; }
    public decimal Low { get; set; }
    public decimal Close { get; set; }
    public decimal Volume { get; set; }
}

4. Load the chart after render

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // Only on first render
    if (!firstRender)
        return;

    // Load the data
    ChartData data = new()
    {
        ChartEntries = new List<IChartEntry>(chartService.GetSampleData()),
        MarkerData = new List<Marker>(), // See demo for example
    };

    // Optionally define options
    ChartOptions options = new()
    {
        TimeScaleSecondsVisible = false,

        // Setting width to a negative value makes the chart responsive
        Width = -75,
    };

    // Load the chart
    if (myChart != null)
        await myChart.LoadChartAsync(data, options);
}

5. Update the chart with new or added data by calling LoadChartAsync()

public async Task UpdateChart(ChartData updatedChartData) 
{
    await myChart.UpdateChartAsync(updatedChartData);
}

Demo

You can view the code to the demo's index page here.

Advanced

Custom Definitions

When creating a chart, you can pass in custom definitions that to be interpreted by the native TradingView Lightweight library like so:

var options = new ChartOptions();

// CustomChartDefinitions are interpreted by the library's createChart()
options.CustomChartDefinitions["height"] = 500;

// CustomCandleSeriesDefinitions are interpreted by the library's addCandlestickSeries()
options.CustomCandleSeriesDefinitions["borderVisible"] = false;

// CustomVolumeSeriesDefinitions are interpreted by the library's addHistogramSeries()
options.CustomVolumeSeriesDefinitions["color"] = "#26a69a";

NotCoffee418 / TradingView.Blazor