Accumulation chart tooltip on legend hover

[Jean Francois Nadeau]

I am trying to find the right way to show the accumulation chart in my app and here are my problems:

• I like the fact that hovering the labels trigers the tooltips of the chart, but I don't like the disposition of the labels. 
• I like the disposition of the legend (inline on the right with the colored button), but I would like it to trigger the tooltip on hover.

Is there a way to trigger the tooltips of the corresponding point when hovering the legend, just like with the labels?

Thanks

[Durga Gopalakrishnan]

Hi Jean, 

Greetings from Syncfusion. 

Query 1 : I like the fact that hovering the labels triggers the tooltips of the chart, but I don't like the disposition of the labels. 

 

By default, tooltip will be displayed while hovering the pie slice and not by data labels. Disposition of labels will be occurred only when explode is enabled for chart or else it will remains in same position as in initial rendering. 

Query 2 : I like the disposition of the legend (inline on the right with the coloured button), but I would like it to trigger the tooltip on hover. 

 

As of now, we don’t have direct property to show tooltip on legend hover. Instead, you can use annotations to display tooltip on hovering the legend item using chartMouseMove event. We have prepared sample based on your requirement. For an example, we have rendered annotation for 5^th point and while hovering 5^th legend item, annotation will be displayed for that.  

<ejs-accumulationchart chartMouseMove="onChartMouseMove"> 

        <e-accumulationchart-accumulationannotations> 

            <e-accumulationchart-accumulationannotation  

          content="<div style='display:none;border: 1px solid black;background-color:lightgreen;'>Taxes</div>"  

           x="Taxes" y=14 coordinateUnits='@Syncfusion.EJ2.Charts.Units.Point'         region='@Syncfusion.EJ2.Charts.Regions.Series'> 

            </e-accumulationchart-accumulationannotation> 

        </e-accumulationchart-accumulationannotations> 

</ejs-accumulationchart> 

 

<script> 

    function onChartMouseMove(args) { 

        if (args.target.includes("container_chart_legend_text_5") || args.target.includes("container_chart_legend_shape_5")) { 

            var annotionEle = document.getElementById("container_Annotation_0").childNodes; 

            annotionEle[0].style.display = "block"; 

        } 

        else { 

            var annotionEle = document.getElementById("container_Annotation_0").childNodes; 

            annotionEle[0].style.display = "none"; 

        } 

    } 

</script> 

https://ej2.syncfusion.com/aspnetcore/documentation/accumulation-chart/annotation/ 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/LegendTooltip459562629.zip 

Kindly revert us, if you have any concerns. 

Regards, 

Durga G