X - axis display issue

[pankaj kumar jain]

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

[Swetha Babu]

Hi Pankaj,

Greetings from Syncfusion.

We can set the x axis labels as in your image by setting the LabelFormat property as hh:mm tt in the ChartAxisPrimaryXAxis. We can render the tooltip based on your requirement by using the Format property in the ChartTooltipSettings. We have created a simple blazor application using the provided code snippet and the same can be downloaded from the below link.

Sample link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartTooltip-1603868169

Code Snippet:

<SfChart Width="100%" ID="">

 

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="hh:mm tt" Title="Time (s)" Interval="3" IntervalType="IntervalType.Hours">

 

        </ChartPrimaryXAxis>

 

        <ChartPrimaryYAxis Title="Usage" Minimum="-150" Interval="50" Maximum="100" LabelFormat="{value}">

 

        </ChartPrimaryYAxis>

 

        <ChartTooltipSettings Enable="true" Format="End Time: <b>${point.x}</b><br>Casio Main Meter: <b>${point.y}mW</b>"></ChartTooltipSettings>

 

Screenshot:

Kindly, revert us if you have any concerns. If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Swetha