TradingView.Blazor
1.0.4
See the version list below for details.
dotnet add package TradingView.Blazor --version 1.0.4
NuGet\Install-Package TradingView.Blazor -Version 1.0.4
<PackageReference Include="TradingView.Blazor" Version="1.0.4" />
paket add TradingView.Blazor --version 1.0.4
#r "nuget: TradingView.Blazor, 1.0.4"
// Install TradingView.Blazor as a Cake Addin #addin nuget:?package=TradingView.Blazor&version=1.0.4 // Install TradingView.Blazor as a Cake Tool #tool nuget:?package=TradingView.Blazor&version=1.0.4
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 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()
{
CandleData = chartService.GetSampleData(),
MarkerData = new(), // todo: NIY
};
// 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.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 is compatible. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net5.0
- Microsoft.AspNetCore.Components.Web (>= 5.0.8)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
2023.5.20.1603 | 532 | 5/20/2023 |
2022.11.26.144 | 1,222 | 11/26/2022 |
2022.11.26.125 | 322 | 11/26/2022 |
2022.11.24.2153 | 319 | 11/24/2022 |
2022.11.24.2130 | 328 | 11/24/2022 |
1.1.1 | 182 | 5/20/2023 |
1.0.5 | 508 | 7/18/2022 |
1.0.4 | 1,354 | 11/7/2021 |
1.0.3 | 339 | 11/7/2021 |
1.0.2 | 420 | 10/10/2021 |
1.0.0 | 364 | 8/23/2021 |