static tooltip

[Caleb Kliewer]

I would like to have a tooltip from an html template for a pie chart. I can make this tooltip but it follows my mouse as long as it's on the chart. I would prefer that the tooltip stays at a static location for each piece of the pie chart.

[Dharanidharan Dharmasivam]

Hi Caleb, 

Your requirement of placing the tooltip in a static position can be achieved as a workaround. We have prepared a sample in which we have overruled the styles applied to tooltip template element. Find the  code snippet below to achieve this requirment. You can change this with respect to your scenraio. 

JS: 

<div id="tooltipTemplate" style="display: none;color: whitesmoke; padding: 5px 5px 5px 5px"> 

        <div id="values"> 

            <div id="xValue">X Value : #point.x#</div> 

            <div id="yValue">Y Value: #point.y#</div> 

        </div> 

    </div> 

$("#container").ejChart({ 

           series:[{ 

                           tooltip: 

                                    { 

                                        visible: true, 

                                        template: 'tooltipTemplate' 

                                    }, 

           }], 

}); 

<style> 

//Overruled the style of tooltip template here 

        .tooltipDivcontainer { 

            top: 5% !important; 

            left: 2% !important; 

        } 

    </style> 

Note: For the highlighted section in id, you need to specify the id of the chart element in which chart is going to be rendered. 

Screenshot 1: 

 

Screenshot 2: 

 

Sample for reference can be find from below link. 

http://jsplayground.syncfusion.com/ysvcwxgr  

 

Thanks, 

Dharani. 

[Caleb Kliewer]

This solution always puts it at the top left of the window. Is there anyway to make it stay within the chart's container? Thanks.

[Dharanidharan Dharmasivam]

Hi Caleb, 

Your requirement can be achieved using the annotation feature and pointRegionMouseMove event. We have prepared a sample in which we have rendered the annotation and placed within the chart and then using the pointRegionMouseMove event, we have obtained the current x , y points and updated the annotation dynamically. This pointRegionMouseMove event will be triggered when hovered a point. Kindly find the code snippet below to achieve this requirement. You can customize the text based on your requirement. 

JS: 

<div id="annotationTemplate" > 

        //... 

  </div> 

 

$("#container").ejChart({ 

      annotations:[{visible:true, content:"annotationTemplate", region:"series"}], 

      //... 

      pointRegionMouseMove: 'mouseMove' 

}); 

 

function mouseMove(sender) { 

//get x and y values from arguments of event 

              var pointIndex = sender.data.pointData[0].PointIndex, 

              x = sender.data.region.Series.points[pointIndex].x, 

              y = sender.data.region.Series.points[pointIndex].y, 

//Get the annotation element from and Dom and update with the x and y values 

              annotGroup= $("#annotation_"+ this._id +"_annotationTemplate_0")[0]; 

              annotGroup.children[0].innerText = "X : " + x; 

              annotGroup.children[1].innerText = "Y : " + y; 

} 

Note :   The highlighted id should be equal in all the above cases. 

Screenshot: 

 

Sample for reference can be find from below link. 

http://jsplayground.syncfusion.com/sdgpbsbv  

Thanks, 

Dharani.