Tooltip for 100% stacked bar

Hi,

I'm trying to display a tooltip with the stack bar chart but it never display

Here's the code for my chart, it's pratically identical to the one in your demo:


I'm using the version 19.3.0.44 of the Syncfusion.Blazor.Charts package



7 Replies

AR Antoine Roy-Lachance November 16, 2021 09:22 PM UTC

Also I would like to show a vertical scrollbar for the char when there's too many entries to show, I read the doc on the chart component and didn't find anything about vertical scrollbar



SM Srihari Muthukaruppan Syncfusion Team November 17, 2021 01:05 PM UTC

Hi Antoine,


Please find the response for chart related queries.


Query #1: I'm trying to display a tooltip with the stack bar chart but it never display


We request you to kindly include the lodash
script in the HEAD element of the ~/Pages/_Host.cshtml page for server side blazor application. In case, if you are using WASM application, include it in the HEAD element of the ~/wwwroot/index.html page for user interaction.


<head>

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

</head>


We have tested the reported scenario and it is working fine in the latest version of the chart 19.3.53 with the lodash. Unfortunately we are unable to reproduce the reported scenario in the version 19.3.44 too. Please find the sample used for testing and screenshot for your reference.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/StackingBar100Tooltip-709809974.zip


Code Snippet:

<SfChart Title="Sales Comparison" Theme="@Theme">

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

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

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

        </ChartPrimaryXAxis>

        <ChartPrimaryYAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift">

        </ChartPrimaryYAxis>

        <ChartSeriesCollection>

            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="AppleSales" Width="2" Name="Apple" Type="ChartSeriesType.StackingBar100">

            </ChartSeries>

            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="OrangeSales" Width="2" Name="Orange" Type="ChartSeriesType.StackingBar100">

            </ChartSeries>

            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="Wasteage" Width="2" Name="Wastage" Type="ChartSeriesType.StackingBar100">

            </ChartSeries>

        </ChartSeriesCollection>

        <ChartZoomSettings EnableScrollbar="true" ></ChartZoomSettings>

        <ChartTooltipSettings Enable="true" Shared="true" Format="${point.x} : <b>${point.y} (${point.percentage}%)</b>"></ChartTooltipSettings>

    </SfChart>


Screenshot:

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.


  1. Try to reproduce the reported scenario in the provided sample.
  2. Share the replication procedure for the reported scenario.


Query #2: Also I would like to show a vertical scrollbar for the char when there's too many entries to show,


We can achieve your requirement through lazy loading concept. But as of now we are facing issue in scrolling the scrollbar. We have also logged a bug report on this and this fix will be available in our weekly patch release which is scheduled to be rolled out on or before 7th December 2021. Once the issue is fixed we will provide the sample for the mentioned scenario.


We appreciate your patience until then. You can keep track of the bug from the below feedback link. 


Feedback Link :  https://www.syncfusion.com/feedback/30431/console-error-thrown-while-using-lazy-loading-sample


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 


Let us know if you have any concerns.


Regards,

Srihari M




AR Antoine Roy-Lachance November 17, 2021 01:23 PM UTC

Hi, I have include the script in the head of my _host.cshtml file and the tooltips works fine now :). Also for the vertical scroll bar I was able to achieve the desire behavior by using a div with a height higher than his parent and the overflow-y property at scroll

Thank you for the quick answer

Antoine



DG Durga Gopalakrishnan Syncfusion Team November 18, 2021 01:01 PM UTC

Hi Antoine, 

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

Regards,  
Durga G 



DG Durga Gopalakrishnan Syncfusion Team December 8, 2021 05:08 PM UTC

Hi Antoine, 

We are working on the reported issue. We will include the fix in our upcoming weekly patch release which is scheduled to be rolled out on 21st December, 2021. We appreciate your patience until then. 

Regards,  
Durga G


DG Durga Gopalakrishnan Syncfusion Team December 21, 2021 03:27 PM UTC

Hi Antoine, 

Thanks for being patience. We have resolved the reported issue and generated custom nugget. We request you to ensure your application by installing this custom nugget.  


Kindly revert us if you have any concerns. 

Regards, 
Durga G 



DG Durga Gopalakrishnan Syncfusion Team December 28, 2021 02:05 PM UTC

Hi Antoine, 

We are glad to announce that our v19.4.40 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor NuGet package version.  


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Durga G 


Loader.
Up arrow icon