Team,
I've got some really exciting updates, I recently learned about the SfContextMenu and how this can apply to an SfStockChart. This is extremely powerful and I am very excited to share my simple source code with you:
@page "/stockchart"
@rendermode InteractiveServer
@inject IPolygonApiService PolygonApiService
<div style="margin-bottom: 25px;">
<!-- Input for Ticker Symbol -->
<label for="ticker">Ticker Symbol: </label>
<input type="text" id="ticker" @bind="TickerSymbol" placeholder="Enter ticker symbol" />
<!-- Button to Fetch Data -->
<button @onclick="FetchStockData">Fetch Stock Data</button>
<strong>Open:</strong> @StockDetails.LastOrDefault()?.Open
<strong>High:</strong> @StockDetails.LastOrDefault()?.High
<strong>Low:</strong> @StockDetails.LastOrDefault()?.Low
<strong>Close:</strong> @StockDetails.LastOrDefault()?.Close
<strong>Volume:</strong> @StockDetails.LastOrDefault()?.Volume
</div>
<SfStockChart Height="600px" ID="stockChart">
<!-- Crosshair and Tooltip Settings -->
<StockChartCrosshairSettings Enable="true" />
<StockChartTooltipSettings
TooltipPosition="TooltipPosition.Nearest"
Enable="true"
Format="Open : <b>${point.open}</b><br/>
High : <b>${point.high}</b><br/>
Low : <b>${point.low}</b><br/>
Close : <b>${point.close}</b><br/>
Volume : <b>${point.volume}</b>" />
<!-- Define Periods -->
<StockChartPeriods>
<StockChartPeriod Text="All" />
<StockChartPeriod IntervalType=RangeIntervalType.Years Interval="1" Text="1Y" />
<StockChartPeriod IntervalType=RangeIntervalType.Months Interval="6" Text="6M" />
<StockChartPeriod IntervalType=RangeIntervalType.Months Interval="3" Text="3M" />
<StockChartPeriod IntervalType=RangeIntervalType.Months Interval="1" Text="1M" />
</StockChartPeriods>
<!-- Candlestick chart series -->
<StockChartSeriesCollection>
<StockChartSeries
DataSource="@StockDetails"
Type="ChartSeriesType.Candle"
EnableSolidCandles="true"
XName="Date"
Open="Open"
High="High"
Low="Low"
Close="Close"
Volume="Volume"
YAxisName="primaryYAxis" />
<StockChartSeries
DataSource="@StockDetails"
Type="ChartSeriesType.Column"
XName="Date"
YName="Volume"
YAxisName="secondaryYAxis" />
</StockChartSeriesCollection>
<StockChartAxes>
<StockChartAxis Name="primaryYAxis" LabelPosition="AxisPosition.Inside" RowIndex="1">
<StockChartAxisMajorGridLines Width="0" />
<StockChartAxisMinorGridLines Width="0" />
</StockChartAxis>
<StockChartAxis Name="secondaryYAxis" LabelPosition="AxisPosition.Inside" RowIndex="0">
<StockChartAxisMajorGridLines Width="0" />
<StockChartAxisMinorGridLines Width="0" />
</StockChartAxis>
</StockChartAxes>
<StockChartRows>
<StockChartRow Height="20%"></StockChartRow>
<StockChartRow Height="80%"></StockChartRow>
</StockChartRows>
<StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
<StockChartAxisMajorGridLines Width="0" />
<StockChartAxisMinorGridLines Width="0" />
</StockChartPrimaryXAxis>
</SfStockChart>
<SfContextMenu Target="#stockChart" TValue="MenuItem">
<MenuItems>
<MenuItem Text="Cut" IconCss="e-cm-icons e-cut"></MenuItem>
<MenuItem Text="Copy" IconCss="e-cm-icons e-copy"></MenuItem>
<MenuItem Text="Paste" IconCss="e-cm-icons e-paste">
<MenuItems>
<MenuItem Text="Paste Text" IconCss="e-cm-icons e-pastetext"></MenuItem>
<MenuItem Text="Paste Special" IconCss="e-cm-icons e-pastespecial"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Separator="true"></MenuItem>
<MenuItem Text="Link" IconCss="e-cm-icons e-link"></MenuItem>
<MenuItem Text="New Comment" IconCss="e-cm-icons e-comment"></MenuItem>
</MenuItems>
<MenuEvents TValue="MenuItem" ItemSelected="OnMenuItemSelected" />
</SfContextMenu>
@code {
// Input properties for user selection
public string TickerSymbol { get; set; } = "AAPL";
public string StartDate { get; set; } = DateTime.Now.AddYears(-2).ToString("yyyy-MM-dd");
public string EndDate { get; set; } = DateTime.Now.ToString("yyyy-MM-dd");
public class StockChartData
{
public DateTime Date { get; set; }
public Double Open { get; set; }
public Double High { get; set; }
public Double Low { get; set; }
public Double Close { get; set; }
public Double Volume { get; set; }
}
public ObservableCollection<StockChartData> StockDetails { get; set; } = new ObservableCollection<StockChartData>();
protected override async Task OnInitializedAsync()
{
await FetchStockData();
}
protected async Task FetchStockData()
{
var aggregateBars = await PolygonApiService.GetAggregateBars(TickerSymbol, StartDate, EndDate);
StockDetails.Clear();
foreach (var bar in aggregateBars)
{
StockDetails.Add(new StockChartData
{
Date = DateTimeOffset.FromUnixTimeMilliseconds(bar.Timestamp).DateTime,
Open = bar.OpenPrice,
High = bar.HighPrice,
Low = bar.LowPrice,
Close = bar.ClosePrice,
Volume = bar.Volume
});
}
}
private Dictionary<string, Action> ContextMenuActions = new();
protected override void OnInitialized()
{
ContextMenuActions = new Dictionary<string, Action>
{
{ "Cut", HandleCutAction },
{ "Copy", HandleCopyAction },
{ "Paste", HandlePasteAction },
{ "Link", HandleLinkAction },
{ "New Comment", HandleNewCommentAction }
};
}
private void OnMenuItemSelected(MenuEventArgs<MenuItem> args)
{
Console.WriteLine($"Menu item selected: {args.Item.Text}");
if (ContextMenuActions.ContainsKey(args.Item.Text))
{
ContextMenuActions[args.Item.Text].Invoke();
}
else
{
Console.WriteLine($"No action mapped for: {args.Item.Text}");
}
}
private void HandleCutAction()
{
Console.WriteLine("Cut action triggered.");
// Add logic to handle "Cut" action
}
private void HandleCopyAction()
{
Console.WriteLine("Copy action triggered.");
// Add logic to handle "Copy" action
}
private void HandlePasteAction()
{
Console.WriteLine("Paste action triggered.");
// Add logic to handle "Paste" action
}
private void HandleLinkAction()
{
Console.WriteLine("Link action triggered.");
// Add logic to handle "Link" action
}
private void HandleNewCommentAction()
{
Console.WriteLine("New Comment action triggered.");
// Add logic to handle "New Comment" action
}
}
The very first use-case would be to take a bar (which presumably will always have a date associated with it) and use that to cast another API to Polgyon for more in-depth data researching (Option Snapshots or Equity Block investigation). It's stupid, but it's a UI/UX concern -- I want to investigate certain days, and by being able to click the actual bar or day, and have it go do some action, that's extremely convenient. I realize this thread will be seen by less than <50 people, but anyone who was curious maybe can see how powerful these SfStockChart's can become can start working on them and troubleshooting them in the same manner that I am to make them very powerful and useful. These provided examples already provide a tremendous leg-up over the typical Chart.js stuff, and by being able to use C#/Blazor (along with the entire suite of Syncfusion Components), we have some very powerful tools at our disposal.
