amCharts angular directive cannot change ChartScrollbar draghandles

Question

I cannot seem to get amCharts to respect the dragIcon property on the ChartScrollbar. I have a plunk here that demonstrates the problem.

I suspect this is a problem with the GrantMStevens amChartsDirective because of the previous problem I had with it not passing properties correctly and the fact that it works in this demo. The previous was debugged by xorspark, and I was able to replicate his debugging, but this is not broken in the same way. Unfortunately, I am not yet good enough at debugging JavaScript to track this one down.

Anyone have any ideas?

  'use strict';
    angular.module('App')
    .controller('MyChartController', ['$scope', function($scope) {
        $scope.data = {};

        $scope.amChartOptions = {
        type: "serial",
        creditsPosition: "upper-left",

        categoryField: "IncidentId",
        rotate: true,
        theme: "light",
        categoryAxis: {
            parseDates: false,
            gridAlpha: 0.3,
            gridColor: "#d3d3d3"
        },
        trendLines: [],
        pathToImages: "http://cdn.amcharts.com/lib/3/images/",
        chartScrollbar: {
            oppositeAxis: true,
            autoGridCount: true,
            graph: "AmGraph-1",
            scrollbarHeight: 65,
            dragIcon: "dragIconRoundSmall",
            dragIconHeight: 65,
            backgroundColor: "#000",
            //color: "#000",
            backgroundAlpha: .5,
            selectedBackgroundColor: "#337ab7",
            svgIcons: true
        },
        graphs: [{
            fillColorsField: "lineColor",
            lineColorField: "lineColor",
            balloonText: "[[title]] for [[category]]: [[value]]",
            fillAlphas: 1,
            id: "AmGraph-1",
            title: "Escalation Age",
            type: "column",
            valueField: "Age"
        }],
        guides: [],
        valueAxes: [{
            baseValue: 0,
            id: "ValueAxis-1",
            labelFrequency: 1,
            dateFormats: [],
            title: "Days Active",
            autoGridCount: true,
            gridAlpha: 0.3,
            gridColor: "#d3d3d3",
        }],
        allLabels: [],
        balloon: {},
        legend: {
            enabled: false
        },
        titles: [{
            id: "Title-1",
            size: 15,
            text: ""
        }],
        data: [
            {
            "lineColor": "#ff0000",
            "IncidentId": 93528214,
            "Age": 19
        },{
            "lineColor": "#ff0000",
            "IncidentId": 93434314,
            "Age": 16
        },{
            "lineColor": "#ff0000",
            "IncidentId": 93524544,
            "Age": 12
        },{
            "lineColor": "#ff0000",
            "IncidentId": 93525454,
            "Age": 10
        },{
            "lineColor": "#ff0000",
            "IncidentId": 96578214,
            "Age": 4
        },{
            "lineColor": "#ff0000",
            "IncidentId": 93334519,
            "Age": 2
        }]
        }
    }]);

Answer 1

The old 3.13.0 version of AmCharts on cdnjs doesn't support changing the dragIcon. You need to use a more recent version. The latest version of the AmCharts library can be found on AmCharts' own CDN:

  <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  <script src="https://www.amcharts.com/lib/3/serial.js"></script>
  <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
  <script src="https://https://www.amcharts.com/lib/3/themes/chalk.js"></script>
  <script src="https://https://www.amcharts.com/lib/3/themes/black.js"></script>
  <script src="https://https://www.amcharts.com/lib/3/themes/dark.js"></script>

Updated plunk: https://plnkr.co/edit/mw4f2FWiTsFkOdjd3tkE?p=preview