Chart Changes Settings on Back Navigation in Angular App

[onmyway]

Hi all, 

I hope you can help me. 

I have an issue in my angular app displaying my charts, with what seems to be, different defaults or options, when navigating from one page to another and back. 

To clarify; When I open a page for the 1st time, all my graphs display correctly (the type of graph, the background colour etc.), but when I navigate to another page, and back to that original page, my charts have changed (using perhaps default settings). This happens regardless of changing data parameters or doing new data calls. 

This is what my graph looks like originally:

This is what my graph looks like when navigating back:

When I click on the graph in developer tools, I notice the following <rect> options were applied:

But this is not the case with my original graph:

However, each time a run the page or return to the page, the actual graph options are logged out (console.log), and are as follows:

VolumeGraphChartConfig: {
    "options": {
        "chart": {
            "type": "column",
            "height": 400,
            "spacingTop": 30,
            "spacingBottom": 10,
            "spacingLeft": 10,
            "spacingRight": 50,
            "zoomType": "x",
            "backgroundColor": false,
            "resetZoomButton": {
                "position": {
                    "x": 0,
                    "y": 40
                }
            }
        },
        "credits": {
            "enabled": false
        },
        "navigation": {
            "buttonOptions": {
                "y": -30
            }
        },
        "tooltip": {
            "pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <strong>{point.y}</strong> mentions<br/>",
            "shared": false
        },
        "plotOptions": {
            "column": {
                "stacking": ""
            },
            "pie": {
                "allowPointSelect": true,
                "cursor": "pointer",
                "dataLabels": {
                    "enabled": true
                },
                "showInLegend": true
            },
            "series": {
                "animation": true,
                "point": {
                    "events": {}
                },
                "dataLabels": {
                    "enabled": true,
                    "format": ""
                }
            }
        },
        "exporting": {
            "sourceWidth": 1600,
            "sourceHeight": 800,
            "chartOptions": {
                "subtitle": null
            },
            "buttons": {
                "contextButton": {
                    "text": "Export Chart"
                }
            }
        }
    },
    "title": {
        "text": false
    },
    "xAxis": {
        "type": "category",
        "categories": [
            "2017-01-01",
            "2017-01-02",
            "2017-01-03",
            "2017-01-04",
            "2017-01-05",
            "2017-01-06",
            "2017-01-07",
            "2017-01-08",
            "2017-01-09"
        ]
    },
    "yAxis": {
        "gridLineWidth": 1,
        "title": {
            "text": "Count"
        },
        "labels": {
            "enabled": true,
            "format": "{value}"
        }
    },
    "legend": {
        "layout": "vertical",
        "floating": true,
        "backgroundColor": "#FFFFFF",
        "align": "right",
        "verticalAlign": "top",
        "y": 60,
        "x": -60
    },
    "series": [
        {
            "name": "Twitter",
            "data": [
                5,
                16,
                7,
                11,
                4,
                13,
                12,
                15,
                11
            ],
            "color": "#4099FF"
        },
        {
            "name": "Instagram",
            "color": "#3f729b"
        },
        {
            "name": "Youtube",
            "data": [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0
            ],
            "color": "#e52d27"
        }
    ],
    "loading": false
}

My chart is rendered to this div:

<div>
 <section id="volume">
 <og-data-box heading="Social Media Mentions per day" link="" uid="mentionsList" description="">
 <div class="dataStatus">
 {{dataStatus}}
 <og-loading-indicator></og-loading-indicator>
 </div>
 <div class="dataContent" ng-show="dataContent">
 <button class="basicButton" ng-click="volumeChartchangeStacking()">{{stackStatus}}</button>
 <button class="basicButton" ng-click="chartReflow()"></button>
 <highchart id="SocialMentionsVolume" config="VolumeGraphChartConfig" style="width:85%; margin:5px"></highchart>
 </div>
 </og-data-box>
 </section>
</div>

Thank you!