notcoffee418 / tradingview.blazor Goto Github PK

View Code? Open in Web Editor NEW

35.0 4.0 12.0 447 KB

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

License: Apache License 2.0

HTML 44.89% C# 28.17% CSS 19.09% JavaScript 7.33% Shell 0.53%

chart blazor charting-library tradingview

tradingview.blazor's Introduction

TradingView.Blazor

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

Preview

View the demo

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";

tradingview.blazor's People

Contributors

Stargazers

Watchers

Forkers

huafangyun alenny811 lianfeng saent-x marcrobards sajad-mirzaei clarenceovo emileschneider subn0wa raysinner jt-thedotcorp grante

tradingview.blazor's Issues

upload thread

Have you ever tried to implement markets

Hi not Coffee
Thanks for your code
I have adapted you component to Blazor Server 3.1 sucessfully
But I was not be able to implement the markers.
https://www.tradingview.com/lightweight-charts/
https://jsfiddle.net/TradingView/nd80cx1a
I intrepid to copy paste examples of markets and I got nothing
https://github.com/tradingview/lightweight-charts/blob/master/docs/series-basics.md
Have you ever tried this?

In theory is only add marker to an existing serie like for example

candleSeries..setMarkers([
{
time: '2019-04-09',
position: 'aboveBar',
color: 'black',
shape: 'arrowDown',
},
{
time: '2019-05-31',
position: 'belowBar',
color: 'red',
shape: 'arrowUp',
id: 'id3',
},
{
time: '2019-05-31',
position: 'belowBar',
color: 'orange',
shape: 'arrowUp',
id: 'id4',
text: 'example',
size: 2,
},
]);

Any way to specify time scale on the chart?

First of all... Thank you for this component... It's a simple component that serves a good purpose.

I am using it in my web page. But I am running into the issue of my candles being one sided on the chart when it loads.

Here is an example:

I know that in the TradingView API reference there is a way to provide the time scale of the chart. Or even to resize the chart with the candle data that it has.

But this is not available on your component. Would that be something that it could be made available?

I would try to take a swing at it, but I'm horrible with JS and the way Blazor interacts with it.

Also, another thing... I've noticed that when the price data is very small (over 3 decimal places) the price doesn't reflect in the price scale. Very small numbers are common in markets like crypto. Is that also something that can be addressed.

Thanks again for the work you've done.

Fix cloudflare deploy

The auto version path breaks cloudflare deploy because of path permissiom probably.
either move nuget folder to project or see if u can pull a bash try catch without breaking versioning.

Issue adding a second series

Hi,

I'm having issues adding a second series to a chart. Here is my code:

List<PricePoint> ma20 = _equityTimeserie.Items
			.Where(item => item.MovingAverage.Days20 is not null)
			.Select(item => new PricePoint {
				Price = item.MovingAverage.Days20!.Value.AsDecimal(), 
				Time = item.Date.ToDateTime(), 
			})
			.ToList();

List<Ohlcv> ts = _equityTimeserie.Items
	.Select(item => new Ohlcv {
		Time = item.Date.ToDateTime(),
		Open = item.Price.Open.AsDecimal(),
		High = item.Price.High.AsDecimal(),
		Low = item.Price.Low.AsDecimal(),
		Close = item.Price.Close.AsDecimal()
	})
	.ToList();

var chartOptions = new ChartOptions {
	Width = -75,
	RightPriceScaleDecimalPrecision = 0,
};

var data = new ChartData { ChartEntries = [..ma20, ..ts], MarkerData = [] };

if (_tradingViewChart != null) {
	await _tradingViewChart.LoadChartAsync(data, chartOptions);
}

I've also tried:


// Same code as before

var data = new ChartData { ChartEntries = [ ..ts], MarkerData = [] };
var data2 = new ChartData { ChartEntries = [..ma20], MarkerData = [] };

if (_tradingViewChart != null) {
	await _tradingViewChart.LoadChartAsync(data, chartOptions);
	await _tradingViewChart.LoadChartAsync(data2, chartOptions);
}

Am I doing something wrong or the library doesn't support this case?

Thanks for your help

Cannot implicitly convert ...to TradingViewChart

Created by mistake, just needed to add the @using TradingView.Blazor namespace to the top of the .razor page.

priceLine

how difficult would it be to add the Priceline option

const priceLine = { price: 980, color: '#be1238', lineWidth: 2, lineStyle: LightweightCharts.LineStyle.Dotted, axisLabelVisible: true, title: 'P/L: 500', };