We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

X - axis display issue

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






1 Reply

SB Swetha Babu Syncfusion Team October 21, 2022 05:57 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon