TradingView.Blazor
1.0.5
See the version list below for details.
dotnet add package TradingView.Blazor --version 1.0.5
NuGet\Install-Package TradingView.Blazor -Version 1.0.5
<PackageReference Include="TradingView.Blazor" Version="1.0.5" />
paket add TradingView.Blazor --version 1.0.5
#r "nuget: TradingView.Blazor, 1.0.5"
// Install TradingView.Blazor as a Cake Addin
#addin nuget:?package=TradingView.Blazor&version=1.0.5
// Install TradingView.Blazor as a Cake Tool
#tool nuget:?package=TradingView.Blazor&version=1.0.5
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.
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";
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. 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. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.7)
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 | 397 | 5/20/2023 |
2022.11.26.144 | 1,165 | 11/26/2022 |
2022.11.26.125 | 298 | 11/26/2022 |
2022.11.24.2153 | 295 | 11/24/2022 |
2022.11.24.2130 | 303 | 11/24/2022 |
1.1.1 | 160 | 5/20/2023 |
1.0.5 | 478 | 7/18/2022 |
1.0.4 | 1,331 | 11/7/2021 |
1.0.3 | 318 | 11/7/2021 |
1.0.2 | 390 | 10/10/2021 |
1.0.0 | 334 | 8/23/2021 |