Добавьте градиент к плагину Easy Pie Chart

Question

Я пытаюсь добавить линейный градиент к плагину Easy Pie Chart, используя код, указанный в инструкциях плагина:

https://github.com/rendro/easy-pie-chart

Вот скрипка, с которой я экспериментировал:

https://codepen.io/fakeplastic93/pen/KOvWXO

Я что-то пропустил?

Текущий JS:

$('.percentage').easyPieChart({
  animate: 1500,
  lineWidth: 44,
  size: 400,
  barColor:'#f4a13b',
  trackColor: false,
  lineCap: 'butt',
  scaleColor:false,
  onStep: function(value) {
    this.$el.find('span').text(Math.round(value));
  },
  onStop: function(value, to) {
    this.$el.find('span').text(Math.round(to));
  }
});

new easyPieChart(element, {
  barColor: function(percent) {
    var ctx = this.renderer.getCtx();
    var canvas = this.renderer.getCanvas();
    var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop(0, "#f4a13b");
        gradient.addColorStop(1, "b02325");
    return gradient;
  }
});

В форме CSS градиент, который я в конечном итоге пытаюсь воспроизвести, будет выражаться как:

фон: линейный градиент (45 градусов, #f4a13b 22%,#b02325 72%);

хотя я не уверен, насколько у меня есть контроль над начальным и конечным процентами в js.