Mouse over chart function does not work

[Unknown]

I am creating a chart that fetches log information from the database.

The data is imported correctly, but the "ChartSeries" function is not working.

Also, there is no animation effect on the chart.

I attach an example of my code below. What is the problem?

```

<SfChart @ref="_chartObj" Title="title" Theme="Theme.Bootstrap4">

                    <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

                    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">

                        <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>

                        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

                    </ChartPrimaryXAxis>

                    <ChartPrimaryYAxis Minimum="0" Maximum="@maxvalue" Interval="@Math.Truncate(maxvalue/2)" LabelFormat="{value}Review">

                        <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                    </ChartPrimaryYAxis>

                    <ChartAxes>

                        <ChartAxis Minimum="0" Maximum="@maxvalue" Interval="@Math.Truncate(maxvalue/2)" OpposedPosition="true" RowIndex="0" Name="yAxis2" LabelFormat="{value}Comment">

                            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

                        </ChartAxis>

                    </ChartAxes>

                    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>

                    <ChartSeriesCollection>

                        <ChartSeries DataSource="@ChartPoints" XName="Key" YName="Review" Opacity="1" Name="reviewdocu" Width="2" Type="ChartSeriesType.Column">

                            <ChartMarker Visible="true" Height="10" Width="10">

                            </ChartMarker>

                        </ChartSeries>

                        <ChartSeries DataSource="@ChartPoints" YAxisName="yAxis2" XName="Key" YName="Comment" Opacity="1" Name="tagging" Width="2" Type="ChartSeriesType.Line">

                            <ChartMarker Visible="true" Height="10" Width="10">

                                <ChartMarkerBorder Color="#F8AB1D" Width="2"></ChartMarkerBorder>

                            </ChartMarker>

                        </ChartSeries>

                    </ChartSeriesCollection>

                    <ChartLegendSettings Visible="false"></ChartLegendSettings>

                </SfChart>

@code{

SfChart _chartObj;

public List<CategoryData> ChartPoints { get; set; }

private double maxvalue { get; set; }

    public class CategoryData

    {

        public string Key { get; set; }

        public long? Review { get; set; }

        public long? Comment { get; set; }

    }

protected override async Task OnInitializedAsync()

    {

          await LoadGridData(1)

    }

public async Task LoadGridData(long projectId)

    {

        

        var projectstatus = await _hyenaKnowledgeApi.GetActivityHistorys();

        if (projectstatus.Count() > 0)

        {

            DateTime startDate = DateTime.Now;

            DateTime endDate = DateTime.Now.AddDays(-7);

            var _week = projectstatus.Where(i => i.ProjectId == projectId && i.Created <= startDate && i.Created >= endDate).GroupBy(i => i.Created.ToString("yyyy/MM/dd")).ToList();

            var _weekData = new List<CategoryData>();

            foreach (var dayData in _week)

            {

                long Review = 0, Comment = 0;

                foreach (var day in dayData)

                {

                    if (day.ActionType == ActionTypes.MediaFileView)

                    {

                        Review++;

                    }

                    else

                    {

                        Comment++;

                    }

                }

                _weekData.Add(new CategoryData { Key = dayData.Key, Comment = Comment, Review = Review });

            }

            if (_weekData.Count > 0)

            {

                var aaa = Convert.ToInt32(_weekData.Max(i => i.Review).ToString());

                var bbb = Convert.ToInt32(_weekData.Max(i => i.Comment).ToString());

                if (aaa < bbb)

                {

                    maxvalue = bbb;

                }

                else

                {

                    maxvalue = aaa;

                }

            }

            else

            {

                maxvalue = 20;

            }

            _weekData = _weekData.OrderBy(i => i.Key).ToList();

            ChartPoints = _weekData; 

            // await _chartObj.RefreshAsync();

            this.StateHasChanged();

            await OnInitializedAsync();

        }

    }

}

[Unknown]

I figured out what the problem was.

I only installed "syncfusion.blazor.charts".

Installing syncfusion.Blazor throws a lot of errors.

Installing "syncfusion.Blazor" will cause many errors as you have other "syncfusion" components installed individually.

Is there any way to install only the chart and use it normally? The version is 19.2.0.44..

[Sridevi Bharathi Manohar]

Hi Arc, 

Greetings from Syncfusion. 

We have analyzed your query and prepared a sample by installing Syncfusion.Blazor.Charts Nugget package which is working fine in our end. Unfortunately, we are unable to reproduce the reported issue. Please find below sample which is used by testing. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartAsyncData-728331358.zip 

If you still facing that issue then please try to share the following information which will be more helpful for further analysis and provide you the solution sooner. 

• Try to reproduce the reported scenario in shared sample.
• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.
• Share your datasource file.

Note: Please make sure you have included lodash script reference in the HEAD element of the ~/Pages/_Host.cshtml page for user interaction. 

 

<head> 

    <script src=https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js></script> 

    <script src=https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js></script> 

</head> 

UG: https://blazor.syncfusion.com/documentation/chart/getting-started 

Kindly let us know if you have any concerns. 

Regards, 

Sridevi Bharathi.

[Unknown]

It's a good solution. The problem has been resolved.

[Sridevi Bharathi Manohar]

Hi Arc, 

 

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you. 

 

Regards, 

Sridevi Bharathi.