Issue adding a second series

[RHaughton]

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

[NotCoffee418]

It's not currently supported in this library, no. You can do it using the underlying javascript library though.

I'm a bit reluctant to make changes to this library since it's practically legacy. But it's really just supposed to be simple interop with TradingView Lightweight anyway, anything advanced should probably not be done with TradingView.Blazor.

You can define the data in c# and pass it in with code you can use from this file in my library.

And the JS is something along the lines of:

// Set up the main chart container
const chart = createChart(document.body, { width: 600, height: 300 });

// Create two line series
const lineSeries1 = chart.addLineSeries({
  color: 'blue',
  lineWidth: 2,
});

const lineSeries2 = chart.addLineSeries({
  color: 'red',
  lineWidth: 2,
});

// Sample data for the first series
lineSeries1.setData([
  { time: '2021-01-01', value: 50 },
  { time: '2021-02-01', value: 57 },
  { time: '2021-03-01', value: 66 },
]);

// Sample data for the second series
lineSeries2.setData([
  { time: '2021-01-01', value: 48 },
  { time: '2021-02-01', value: 60 },
  { time: '2021-03-01', value: 68 },
]);

// Optionally, configure the scale or any other chart settings
chart.timeScale().fitContent();