Hi All,
I had 5 min data for a day and would like to render the line chart. Line chart rendered succcefully but I wants x-axis to have date and hours like shown below with the customized tooltip.
I had use Interval type as hour but not getting the excepted x-axis.
Below is the code and rendered chart
<h3>HistoricalTrend</h3>
<div class="container" Width="100%">
<SfChart Width="100%" ID="">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" LabelFormat="hm" Title="Time (s)" Interval="1" IntervalType="IntervalType.Hours">
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Usage" Minimum="-150" Interval="50" Maximum="100" LabelFormat="{value}">
</ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries Type="ChartSeriesType.Line" XName="Timestr" YName=metrics DataSource=@chartDataPointList>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
@code {
public List<ChartDataPoint> chartDataPointList = new List<ChartDataPoint>();
public class ChartDataPoint
{
public DateTime Timestr { get; set; }
//public double metrics { get; set; }
public double metrics { get; set; }
}
protected override void OnInitialized()
{
base.OnInitialized();
GenerateData();
}
private void GenerateData()
{
Random rnd = new Random();
DateTime startTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 00, 00, 00);
for (int i=0;i<288;i++)
{
startTime = startTime.AddMinutes(5);
chartDataPointList.Add(
new ChartDataPoint
{
Timestr = startTime,
metrics = rnd.Next(-150, 50)
}
);
}
}
}
Need to have axis like the above chart
Thanks