Show point tooltip programmatically

[Jirí Blažek]

Hello,

I need to show Accumulation chart point tooltip programmatically. I need to trigger it from outside of the chart. Is it possible? I didn't find any mention about this in documentation.

Thanks,

Jiri Blazek

[Durga Gopalakrishnan]

Hi jblazek, 

We have analysed your query and suggest you to use tooltipRender event to customize the tooltip text on each data point in a series. We have prepared sample for your reference. Please find the code snippet and screenshot. 

tooltipRender: (args: IAccTooltipRenderEventArgs) => { 

            args.text = args.data.pointX; 

        }, 

 

https://stackblitz.com/edit/yptv5f 

Kindly revert us, if you have any concerns. 

Regards, 

Durga G 

[Jirí Blažek]

Hello Durga,

this doesn't answer my question. Let me explain a little bit more. By default the tooltip is shown when hovering over the chart points but I need to show the tooltip when I click the button outside of the chart. Is there anyway how to show tooltip on specific point programmatically and not just by hovering the chart point?

Thanks,

Jiri Blazek

[Durga Gopalakrishnan]

Hi jblazek, 

We have analysed your query. We suggest you to use annotation to display the text of particular point by specifying coordinate unit as point and you can specify pixel also to place text in pixels. We have prepared sample and attached for your reference.  

  document.getElementById('load').onclick = () => { 

         pie.annotations[0].content = "<div style='border: 2px solid red;color:white' id='chart_annotation'>"+ pie.series[0].dataSource[0].x +"</div>"; 

         pie.refresh(); 

     }; 

 

https://stackblitz.com/edit/yptv5f-n3osjv 

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

Please revert us, if you have any concerns. 

Regards, 

Durga G 

[toni Neumann]

I have two charts side by side. They are in the vertical orientation with the data scrolling from the bottom to the top. When the mouse enters one chart, I need to programmatically show the tooltip in the other chart. Attached is a screenshot of my requirements.

What are the API functions to call to do this?

Attachment: time_graph_tooltip_9e53d497.zip

[Swetha Babu]

Hi Toni,

Greetings from Syncfusion.

When we hover on one chart, the tooltip appears on both the charts by using the chartMouseMove event of the chart. We have created a Javascript application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/8akjry?file=index.js

Code Snippet:

chartMouseMove: function(args) {

            if (args.target.indexOf('ChartAreaBorder') > -1) {

                var bounds = document.getElementById('charts1').getBoundingClientRect();

                mousemoveEvent(

                  document.getElementById('charts1'),

                  args.x,

                  bounds.y + (bounds.height/2),

                  args.x,

                  bounds.y + (bounds.height/2)

                );

              }

        },

Screenshot:

Please let us know, if the above sample meets your requirement. Kindly, revert us if you have any concerns.

Regards,

Swetha