Set position for Tooltip

[Ansuman Panda]

Hello,

We are using synfusion accumulation chart. The tooltip is blocking the view. Is there any way to set the position of tooltip.

I tried the below method but it didn't work.

HTML

        <ejs-accumulationchart enableAnimation='true'

            style="height: inherit !important;" [tooltip]='config.tooltip' >

            <e-accumulation-annotations>

                <e-accumulation-annotation  content='<div>{{clusterLength}}</div>'

                 region='Series' coordinateUnits='Pixel' x='50%' y='50%'>

                </e-accumulation-annotation>

            </e-accumulation-annotations>

            <e-accumulation-series-collection>

                <e-accumulation-series [dataSource]='clusterData' [xName]='config.xName'

                [yName]='config.yName' innerRadius='60%' [palettes]='config.palettes'  legendShape='Circle' >

                </e-accumulation-series>

            </e-accumulation-series-collection>

        </ejs-accumulationchart>

.ts File

this.config = {

    ****************************

      tooltip:{

        enable:true,

        position:'BottomRight',

        relativeMode: 'Mouse'

      },

    ***************************

    }

Result:

[Sridevi Bharathi Manohar]

Hi Ansuman, 

  

Greetings from Syncfusion. 

  

We suggest you to use annotations to achieve your requirement. We have added annotation in sample and provided tooltip id as annotation id. We have attached sample for your reference. 

  

<e-accumulation-annotations> 

      <e-accumulation-annotation 

        content="<div id='container_tooltip'></div>" 

      > 

      </e-accumulation-annotation> 

</e-accumulation-annotations> 

  

 

  

Sample: https://stackblitz.com/edit/angular-vhdxqn 

  

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

  

Please revert us, if you have any concerns. 

  

Regards, 

Sridevi Bharathi.

[Ansuman Panda]

Hello,

Thank you for reverting back. 

So as I can see we have no control for positioning tooltip as of now?

Thank You

[Durga Gopalakrishnan]

Hi Ansuman, 

Most welcome. As of now, we don’t have support for tooltip positioning. So, we have logged a feature request on this. Based on other logged tasks priority, we will include this feature in any of our upcoming release. You can keep track of the feature from the below feedback link. 

Feedback Link : https://www.syncfusion.com/feedback/29962/support-to-place-tooltip-in-specified-position 

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. 

Regards,  

Durga G 

[Nishanthi Panner Selvam]

Hi Ansuman, 

We have included support for “Position the tooltip at a fixed location”. We have also prepared a sample that demonstrates to position the tooltip at a fixed location in accumulation chart.

Code-snippet:

public tooltip: Object = {

    enable: true,

    location: { x: 150, y: 80},

  };

Screenshot:

Sample: https://stackblitz.com/edit/angular-vhdxqn-g46f95?file=app.component.html

Regards,

Nishanthi