Highcharts is not displayed in lightning

Question

Component1 : Dashboard

<div class="slds-grid">
    <div class="slds-p-horizontal--small slds-size--1-of-1"> 
        <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center noBorderRadius">  
            <c:DFEventsTimeline timelineData="{!v.timelineData}"/>
        </div>  
    </div>
</div>

DFEventsTimeline: Charts    //chart is drawn when timelineData is changed

<aura:attribute name="timelineData" type="String" default="{}" access="public"/> 
<aura:handler name="change" value="{!v.timelineData}" action="{!c.drawTimeline}"/> 

<div id="timelineContainer" style="min-width: 400px; height: 300px; margin: 0 auto"></div>

DFEventsTimeline: controller function

drawTimeline : function(component, event, helper) {     
    helper.drawTimeline(component);
}

DFEventsTimeline: helper

drawTimeline: function(component){
    var timelineData = component.get("v.timelineData"); 

    var startDate = Date.parse(timelineData.startDate);
    var endDate = Date.parse(timelineData.endDate);

    console.log(timelineData);

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'timelineContainer',
            type: 'scatter',
            zoomType: 'xy', 
            plotBorderWidth: 1,
            events:{
                load: function(event){
                    console.log('chart loaded');
                },
                render: function(event){
                    console.log('chart rendered');
                }
            }
        },
        legend: {
            borderWidth: 1
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Events and Activities'
        },
        xAxis: {
            type: 'datetime', 
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%b %y',
                day: '%e %b'
            },
            title: {
                text: 'Date'
            },
            min: startDate,
            max: endDate,  
            crosshair: {
                width : 1,
                snap : false,
                color : '#555'
            },
            gridLineWidth: 1
            //,offset: -70
        },
        yAxis: {
            title: null,
            labels: {
                enabled: false
            },
            gridLineWidth: 0
        },
        tooltip: { 
            formatter: function() {  
                //console.log(this);
                var dateTime = new Date(this.point.options.x);
                var date = dateTime.getDate() +'/'+ (dateTime.getMonth() + 1) +'/' +dateTime.getFullYear();
                var head = '<b>'+this.point.options.name+'</b><br>';
                var body = '<p>Date :'+date+'</p>';
                return head+body;
            }
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: timelineData.timelineSeriesList
    });
}

I am navigating to Component1 onclick of a button in a component embedded in account details page. First time the chart is displayed correctly. Then I go back to account details page. Again navigate to Component1, the chart is not displayed. The chart container is empty. When I checked, the load and render events are fired correctly but the chart is not displayed. I refresh the page and the chart is displayed again. What is the problem here?

Answer 1

SE_User was right. The DOM Elements are duplicating. When I navigate to the component again, it is not overwritten. Instead it is created again and marked active. So I added class to the container.

<div class="timelineContainer" style="min-width: 400px; height: 300px; margin: 0 auto">
</div>

and in javascript I accessed the latest created element.

var cList = document.getElementsByClassName("timelineContainer");
var container = cList[cList.length-1];

and passed container to the renderTo property of highchart. It worked.