Simple component for basic TradingView chart in Blazor supporting OHLC candle, volume and markers.
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);
}You can view the code to the demo's index page here.
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";