2

I am facing an issue in iPad where the Highcharts width and height are not being reset after navigating to an inner component and changing the screen orientation and coming back.

Here's the code:-

Highchart's component:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <ltng:require scripts="{!join(',', 
                $Resource.l_staticresource + '/scripts/jQuery_V1.js', 
                $Resource.l_staticresource + '/scripts/highcharts.src.js',
                $Resource.l_staticresource + '/scripts/exporting.src.js',
                $Resource.l_staticresource + '/scripts/offline-exporting.src.js'
                    )}"
                  afterScriptsLoaded="{!c.afterLoad}" />


    <aura:attribute name="isResourcesLoaded" type="Boolean" default="false"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>


    <div aura:id="containerChart" id="container" style="height:600px; width: 90%; margin: 0 auto;">    
    </div>
</aura:component>

Controller:-

({
    doInit : function(component, event, helper) {
        helper.drawChart(component, helper);       
    },
    afterLoad : function(component, event, helper) {
        if(component.isValid()) {
            component.set("v.isResourcesLoaded", true);
        }
    }
})

Helper:-

({
    drawChart : function(component, helper) {
        if(component.isValid() && component.get("v.isResourcesLoaded")) {
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Stacked column chart'
                },
                xAxis: {
                    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total fruit consumption'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        }
                    },
                    series: {
                                animation: false,
                                cursor: 'pointer',                                      
                                point: {
                                    events: {
                                        click: function () {
                                                helper.navigateToReport(component);
                                        }
                                    }
                                }
                            }
                },
                series: [{
                    name: 'John',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: 'Jane',
                    data: [2, 2, 3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, 2, 5]
                }]
            });
        }
    },
    navigateToReport: function(component) {
        var navigateToDrilldownEvent = $A.get("e.force:navigateToComponent");

        navigateToDrilldownEvent.setParams({
            componentDef: "c:HighchartsDemoDrillDown"            
        });
        navigateToDrilldownEvent.fire();
    }
})

Renderer:-

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

HighchartsDemoDrillDown(Inner component) component:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <div class="slds-size_1-of-1 errorText">
        Now, when you change the orientation from here and click the back button, the Highchart's width and height does not change.
    </div>
    <div class="slds-size_1-of-1 errorText">
        This issue was not present prior to Salesforce Winter '18 release.
    </div>

</aura:component>

Steps to reproduce the issue:-

After clicking the chart, you are navigated to an inner component. From the inner component, when you change the screen's orientation and click the back button, the Highchart's width and height does not change. This issue was not present prior to Salesforce Winter '18 release.

I have created an unmanaged package to replicate the issue so that it would be easier to debug.

Here's the installation URL:- https://login.salesforce.com/packaging/installPackage.apexp?p0=04t0I000000qq09 (Please do not forget to add "HighchartsDemo" tab in Salesforce Navigation.)

Is there any workaround to fix this?

  • Hi @PawelFus Do you have any insights on this behaviour? – SE_User Nov 3 '17 at 10:22
  • It doesn't looke like a Highcharts issue - if this was fine in previous Salesforce versions, then... Let's debug this a little (I don't have Salesforce account): Could you add chart.events.redraw and check if this callback is fired? Additionally, could you check width&height of the container when redraw is called? Note: You have fixed height, so it shouldn't change. – Paweł Fus Nov 3 '17 at 13:59
  • Hi @PawełFus Thanks for replying. I'm sorry, redraw is getting fired when orientation is changed from the Highcharts screen. But when navigated to inner component and orientation is changed and coming back, then the redraw is not being fired. – SE_User Nov 3 '17 at 14:18
  • In portrait mode, initially the height is 600px and width is 692px. When orientation is changed from the first screen itself, when redraw function is triggered, it's height and width are same. And after the alert from redraw function when it's in landscape mode height is 600px and width is 922px. (I have hardcoded height value in pixels in parent div). – SE_User Nov 3 '17 at 14:28
  • Thank you for the details. That info with redraw not being called is important - this means chart can't be re-rendered. Does salesforce provide any event when orientation changed? We could call there chart.reflow() or chart.setSize(width, height). I'm asking for this event, because I assume window resize doesn't work.. – Paweł Fus Nov 3 '17 at 16:07

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.