angular-chartjs line chart TypeError: t.merge is not a function

Question

I am trying to use the line chart example @ http://jtblin.github.io/angular-chart.js/. I'm getting the following error. Can anyone provide me with some pointers?

error in console

Here is my code. I've tried moving the html out of ui-view to see if there is any problem with angular but doesn't work on the layout page either. Pretty much copy pasted the example code from the website.

angular.module('app').controller(controllerId, [
        '$scope', function ($scope) {
          //Line Chart
            $scope.lineLabels = ["January", "February", "March", "April", "May", "June", "July"];
            $scope.lineSeries = ['Series A', 'Series B'];
            $scope.lineData = [
              [65, 59, 80, 81, 56, 55, 40],
              [28, 48, 40, 19, 86, 27, 90]
            ];
           
            $scope.lineDatasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
            $scope.lineOptions = {
                scales: {
                    yAxes: [
                      {
                          id: 'y-axis-1',
                          type: 'linear',
                          display: true,
                          position: 'left'
                      },
                      {
                          id: 'y-axis-2',
                          type: 'linear',
                          display: true,
                          position: 'right'
                      }
                    ]
                }
            };
          }
]);

<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">Line Chart</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                <i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
    </div>
    <div class="box-body">
        <div class="chart">
            <canvas id="line" class="chart chart-line" chart-data="lineData"
                    chart-labels="lineLabels" chart-series="lineSeries" chart-options="lineOptions"
                    chart-dataset-override="lineDatasetOverride"></canvas>
        </div>
    </div>
    <!-- /.box-body -->
</div>

Answer 1

Check your angular version... I think you are using version 1.2.X and it doesn't have the merge function yet, and angular-chart.js use this function.

What you can do is use this code, put it after the angular loading, and before the chart loading...

if (!angular.merge) {
  angular.merge = (function mergePollyfill() {
    function setHashKey(obj, h) {
      if (h) {
        obj.$$hashKey = h;
      } else {
        delete obj.$$hashKey;
      }
    }

    function baseExtend(dst, objs, deep) {
      var h = dst.$$hashKey;

      for (var i = 0, ii = objs.length; i < ii; ++i) {
        var obj = objs[i];
        if (!angular.isObject(obj) && !angular.isFunction(obj)) continue;
        var keys = Object.keys(obj);
        for (var j = 0, jj = keys.length; j < jj; j++) {
          var key = keys[j];
          var src = obj[key];

          if (deep && angular.isObject(src)) {
            if (angular.isDate(src)) {
              dst[key] = new Date(src.valueOf());
            } else {
              if (!angular.isObject(dst[key])) dst[key] = angular.isArray(src) ? [] : {};
              baseExtend(dst[key], [src], true);
            }
          } else {
            dst[key] = src;
          }
        }
      }

      setHashKey(dst, h);
      return dst;
    }

    return function merge(dst) {
      return baseExtend(dst, [].slice.call(arguments, 1), true);
    }
  })();
}

I took it from here: deep merge objects with AngularJS