Chartjs градиентный цвет фона на основе минимальных и максимальных значений

Я использую chartjs с vue-chart для отображения некоторых данных в моем приложении, и на самом деле я хотел бы получить гистограмму с цветом фона от красного до зеленого.

График имеет динамические минимальные и максимальные значения, но он не может быть меньше 0 и больше 5. аналогично 5-звездочному рейтингу.

Чтобы показать различия в отображаемых данных, я не фиксирую график min/max от 0 до 5.

В настоящее время это код для отображения моей диаграммы:

Опции:

• min составляет -0,2 от минимального значения, но не менее 0;

• Макс составляет +0,2 от максимального значения, но не более 5;

  return {
    legend: {
      display: false
    },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            min,
            max,
            stepSize: 0.5
          }
        }
      ]
    }
  }
  

Панель "данные диаграммы" :

  return {
    labels: this.labels,
    datasets: [
      {
        label: 'Evaluation',
        data: [
          this.photo.composition,
          this.photo.technique,
          this.photo.creativity,
          this.photo.content,
          this.photo.lighting
        ],
        borderWidth: 1
      }
    ]
  }

Визуализация диаграммы:

  const gradient = this.$refs.canvas
    .getContext('2d')
    .createLinearGradient(0, 300, 0, 0)
  gradient.addColorStop(0, '#FF5722')
  gradient.addColorStop(0.5, '#FFC107')
  gradient.addColorStop(1, '#8BC34A')

  this.data.datasets[0].backgroundColor = gradient
  this.renderChart(this.data, this.options)

Результат довольно близок к тому, что я ищу:

К сожалению, то, что я хотел бы видеть, - это красный цвет на 0 и зеленый на 5, поэтому градиент не должен достигать зеленого, если максимальное значение равно 2,5 (здесь я ожидал бы оранжевого), и то же самое для более низких значений... Надеюсь, в этом есть смысл. Может ли кто-нибудь указать мне правильное направление? Спасибо!