AmChart Labels chopped off

Question

I've got a directive setup for showing an chart using AmCharts. Everything is working well except for the axis labels and titles are cut off like it isn't calculating the width of the whole chart including space for the axis correctly, I've attached my directive and a screenshot of the result

You can sort of see best on the y-axis that the labels are there, they're just being missed off. Altering the size of the div the chart loads into has no effect. If I make it bigger or smaller it just changes the size but trimming still remains.

'use strict';

angular.module('core').directive('amchart', ['$window',
function($window) {
return {
    template: '<div id="follower-chart" class="amchart" style="height:300px;width:960px;padding:0 15px;"></div>',
    restrict: 'EA',
    replace: false,
    scope: {
        chartType: '@',
        chartData: '='
    },
    link: function postLink(scope, element, attrs) {

        var chart = false;

        scope.$watch('chartData',function(data){

            if(data) {

                var id = $window._.uniqueId('chart_');
                /*element.attr('id', id);
                element.css({
                    height: '260px',
                    width: '870px',
                    padding: '0 0 60px 60px',
                    margin: '0 auto'
                });*/

                console.log(data);

                chart = new $window.AmCharts.AmSerialChart();

                // Data
                chart.dataProvider = data;
                chart.categoryField = 'date';
                chart.dataDateFormat = 'YYYY-MM-DD';
                chart.addClassNames = true;

                // Axis
                // Category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.labelRotation = 90;
                categoryAxis.labelOffset = 35;
                categoryAxis.parseDates = true;
                categoryAxis.equalSpacing = false;

                // Value
                var valueAxis = new $window.AmCharts.ValueAxis();
                valueAxis.title = 'Followers';
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new $window.AmCharts.AmGraph();
                graph.id = 'g1';
                graph.bullet = 'round';
                graph.bulletBorderAlpha = 1;
                graph.bulletColor = '#FFFFFF';
                graph.bulletSize = 5;
                graph.hideBulletsCount = 50;
                graph.lineThickness = 2;
                graph.lineColor = '#1985a1';
                graph.title = 'Follower Count';
                graph.useLineColorForBulletBorder = true;
                graph.valueField = 'value';

                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new $window.AmCharts.ChartCursor();
                chartCursor.cursorAlpha = 0;
                chartCursor.zoomable = false;
                chartCursor.categoryBalloonEnabled = false;
                chart.addChartCursor(chartCursor);

                chart.creditsPosition = 'bottom-right';

                // WRITE
                chart.write('follower-chart');

            }
        });
    }
};

}]);

Answer 1

On jQuery i used ("autoMargins": true like this):

chart = AmCharts.makeChart("chartdiv", {
                                         "type": "serial",
                                         "addClassNames": true,
                                         "theme": "light",
                                         "autoMargins": true,
                                          ...
                                         }

I hope it will work for you.