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

enter image description here

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

            }
        });
    }
};

}]);

A bit strange, chart should calculate margin automatically. Can you try setting chart.autoMargins = false and then setting marginBottom / marginLeft manually? — zeroin
Thanks, that has worked in terms of getting it to look right, but as you say it is strange that it didn't figure it out itself. I've worked with amCharts outside of Angular before and had no problems, so maybe it's something to do with that. — Mark

Andres Paladines Andres Paladines · Accepted Answer · 2016-03-31T17:25:41

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.

AmChart Labels chopped off

1 Answers