Highcharts tooltip getting overlapped by graph when locker service is activated

I’m facing an issue where Highcharts tooltip is being overlapped by the graph itself.
Please find the following image which depicts the same:

When LS is active:

Highcharts tooltip getting overlapped by graph

When LS is deactivated

Highcharts works fine when LS is not active

(The scale of the two graphs are different because I’m setting dynamic height for the chart using $(window).height() which hasn’t been fixed by Salesforce yet when LS is active.)

Code:

Helper:

drawChart : function(component, helper) {
        if(component.isValid() && component.get("v.isResourcesLoaded") 
           && component.get("v.isDataChanged")) {

           var stackedColumnChartObj = new Highcharts.Chart({
                chart: {
                    renderTo: component.find("stackedColumnChart").getElement()
                },
                title: {
                    text: null
                },                        
                xAxis: {
                    categories: labelList,
                    title: {
                        text: null
                    },
                    labels: {
                        enabled: true,
                        format: '`{value}'
                    }
                },
                yAxis: [{
                    enabled: true,
                    title: {
                        text: null
                    }                                         
                }],
                plotOptions: {
                    series: {
                        animation: false,
                        cursor: 'pointer',
                        marker: {
                            enabled: false
                        }                                    
                    }
                },
                tooltip: {
                     useHTML: true,
                     borderWidth: 0,
                     borderRadius: 0,
                     backgroundColor:"rgba(255,255,255,0)",
                     shadow: false,
                     formatter: function(){
                        var s = this.series.name + ': '+ '<br/>Total: '  
                                +this.stackTotal;       
                        return ("<div class='tooltip'>" + s + "</div>");
                     },
                    enabled: !component.get("v.isDrillDown")
                },
                credits: {
                    enabled: false
                },
                series: columnDataList                  
          });
}

Renderer:

({
    afterRender: function(component, helper) {
        this.superAfterRender();
    },
    rerender: function(component, helper) {
        this.superRerender();   
        helper.drawChart(component, helper);        
    }
})

CSS:-

.THIS .highcharts-tooltip span .tooltip{    
    z-index:999999999 !important;
    border: 1px solid;
    background-color: white;
    padding:5px;
    border-radius: 4px;
}

This issue is not present when locker service is deactivated. But I want this to work perfectly when LS is deactivated. It would be very helpful if anyone can provide any insights regarding this.

Edit:
As per Pawel’s suggestion I rendered the tooltip as HTML (I’ve edited the Highcharts initialization code above). The tooltip renders in Chrome device simulator. But in iPad and iPhone, it throws the following errors on clicking the graph:

TypeError: null is not an object (evaluating ‘e.call’)

TypeError: undefined is not an object (evaluating
‘charts[H.hoverChartIndex].mouseIsDown’)

Answer

Attribution
Source : Link , Question Author : SE_User , Answer Author : Community

Leave a Comment