Common requirement of StockChart, or other time-based charts is to indicate events on the timeline. e.g. Dividends, stock splits, etc.
Here is an example; see the D and S events indicated on chart
To support this, we need to be able to supply a dataset of time-based events, that will be overlayed with indicators on the chart.
Please expose a StockChartSeriesLine tag for the StockChart, so that I can set a SmoothStyle. like in the regular Chart:
<ChartSeries Type="ChartSeriesType.Area">
<ChartSeriesLine Style="@ChartSeriesLineStyle.Smooth"></ChartSeriesLine>
</ChartSeries>
Hello Telerik team,
In order to have a the navigation feature on the Chart, I try to use TelerikStockChart with Line and Area series. I have the following code (adapted of your exemple):
https://blazorrepl.telerik.com/QxuvvZbK14tymFOf29@using TelerikBlazorDemos.DataAccess.Services
@using TelerikBlazorDemos.DataAccess.Dto
@page "/stockchart/overview"
@page "/stockchart/index"
@using System.Collections.Generic
@inject HttpClient http
@if (Data?.Count() > 0)
{
<TelerikStockChart Width="@Width"
Height="@Height"
DateField="@nameof(StockDto.Date)">
<StockChartTitle Text="The Boeing Company NYSE:BA"></StockChartTitle>
<StockChartTooltip Visible="true"></StockChartTooltip>
<StockChartSeriesItems>
<StockChartSeries Type="StockChartSeriesType.Area"
Data="@Data"
Name="test"
Field="@nameof(StockDto.Low)">
</StockChartSeries>
</StockChartSeriesItems>
<StockChartNavigator>
<StockChartNavigatorSeriesItems>
<StockChartNavigatorSeries Type="StockChartSeriesType.Line"
Data="@Data"
Field="@nameof(StockDto.High)">
</StockChartNavigatorSeries>
</StockChartNavigatorSeriesItems>
</StockChartNavigator>
<StockChartValueAxes>
<StockChartValueAxis Name="test" Max="40">
<StockChartValueAxisTitle Text="test2" />
<StockChartValueAxisLabels Background="Yellow"/>
</StockChartValueAxis>
</StockChartValueAxes>
</TelerikStockChart>
}
@code {
private StockService _stockService;
private StockService StockService
{
get
{
if(_stockService == null)
{
_stockService = new StockService(http);
}
return _stockService;
}
}
public const string Height = "400px";
public const string Width = "100%";
IEnumerable<StockDto> Data { get; set; }
protected override async Task OnInitializedAsync()
{
Data = (await StockService.GetStocks()).Take(100);
await base.OnInitializedAsync();
}
}
The problem is the y axis label. I didn't succeded to remove the currency symbol.
I try to change the StockChartValuesAxisLabel format on the TelerikStockChart but the field is not available.
How can i change this format?
Thanks
The StockChart in example "Bind a Candlestick Stock Chart to a model" is not rendering the last data point from April 1, 2019. It appears that the reason is the Navigator integration - if you remove it, then the data point will show.
Also, if you increment the last data value by just one second - DateTime(2019, 4, 1, 0, 0, 1) - then April will show on the Navigator and the data point will display in the Chart.
Display Volume data, on 2nd y-axis (already possible) BUT this 2nd axis needs to be scaled down to bottom x% of vertical.
Most useful StockCharts support display of pricing info (OHLC) up top, and volume below. Example here
- To support this as minimum, the existing functionality of adding multiple datasets, and 2nd dataset being shown against 2nd y-axis, but that 2nd y-axis needs to be able to be scaled down to bottom part of chart (e.g. bottom 1/3), as per example. show show column volume underneath OHLC pricing.
- Alternatively, and much more useful, and one some competitors do, is to support multiple rows of the chart. This allows presentation of correlations of data, e.g. price & volume, or other. In this case, the volume chart would be on 2nd row, but this functionality would allow MUCH more usefulness.
- Both these solutions, with existing navigator, make this a typically useful StockChart.