TradingView.Blazor
2022.11.26.125
See the version list below for details.
dotnet add package TradingView.Blazor --version 2022.11.26.125
NuGet\Install-Package TradingView.Blazor -Version 2022.11.26.125
<PackageReference Include="TradingView.Blazor" Version="2022.11.26.125" />
paket add TradingView.Blazor --version 2022.11.26.125
#r "nuget: TradingView.Blazor, 2022.11.26.125"
// Install TradingView.Blazor as a Cake Addin #addin nuget:?package=TradingView.Blazor&version=2022.11.26.125 // Install TradingView.Blazor as a Cake Tool #tool nuget:?package=TradingView.Blazor&version=2022.11.26.125
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";
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 | 523 | 5/20/2023 |
2022.11.26.144 | 1,219 | 11/26/2022 |
2022.11.26.125 | 319 | 11/26/2022 |
2022.11.24.2153 | 316 | 11/24/2022 |
2022.11.24.2130 | 325 | 11/24/2022 |
1.1.1 | 179 | 5/20/2023 |
1.0.5 | 505 | 7/18/2022 |
1.0.4 | 1,351 | 11/7/2021 |
1.0.3 | 336 | 11/7/2021 |
1.0.2 | 417 | 10/10/2021 |
1.0.0 | 361 | 8/23/2021 |