15

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')

  • May be a stupid question but what if you used css to make the z-index 10000 or something large to bring it to the front?? Little hacky... – Eric Sep 16 '16 at 10:59
  • 1
    Thanks for the suggestion @Eric. But unfortunately this doesn't work as Highcharts renders the tooltip and graphs as svg elements. So I think there's reordering (which is using JS) required to bring it to the front. Also, this issue is not present when Locker Service is deactivated. I'm facing this issue when Locker Service is activated. – SE_User Sep 16 '16 at 12:48
  • 1
    Hi @PawełFus This issue has been fixed in the latest stable version of the Highcharts as well as in Salesforce's Winter '17 12.1 patch. Also, the old issue of error 16 is still coming up in the latest stable version. salesforce.stackexchange.com/questions/147917/… – SE_User Nov 9 '16 at 12:13
  • 1
    Great to hear that! Regarding #16 issue - component everytime loads Highcharts. Highcharts should be loaded just once. – Paweł Fus Nov 9 '16 at 12:28
  • 1
    Hi @PawełFus Just a quick update, Highcharts Error #16 is present in Microsoft Edge browser in windows Desktop. – SE_User Dec 16 '16 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.