[Solved]-Linear gradient width using percentage (%) instead of pixels (px)-Chart.js

var ctx = document.getElementById('myChart').getContext('2d');

var grd = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
grd.addColorStop(0.2, 'red');
grd.addColorStop(0.4, 'orange');
grd.addColorStop(0.78, 'limegreen');
grd.addColorStop(0.9, 'black');

var chart = new Chart(ctx, {
   // The type of chart we want to create
   type: 'horizontalBar',

   // The data for our dataset
   data: {
      labels: ["Confort"],
      datasets: [{
         label: ["Confort actuel"],
         borderWidth: 0,
         borderColor: 'rgba(0,0,0,1.0)',
         backgroundColor: 'rgba(0,0,0,0.2)',
         hoverBackgroundColor: 'rgba(0,0,0,0)',
         data: [64],
      }, {
         label: ["Confort projeté"],
         borderWidth: 0,
         borderColor: 'rgba(0,0,0,1.0)',
         backgroundColor: grd,
         hoverBackgroundColor: grd,
         data: [120],
      }, {
         label: ["Confort optimal"],
         borderWidth: 0,
         borderColor: 'rgba(0,0,0,1.0)',
         backgroundColor: 'rgba(205,205,205,1.0)',
         hoverBackgroundColor: 'rgba(205,205,205,1.0)',
         data: [100],
      }, ]
   },

   // Configuration options go here
   options: {
      legend: {
         display: false,
      },
      scales: {
         xAxes: [{
            stacked: false,
            ticks: {
               beginAtZero: true,
               max: 130,
               display: false,
            },
            gridLines: {
               display: false,
               drawBorder: false,
            },
         }],
         yAxes: [{
            display: false,
            stacked: true,
            barThickness: 20,
            gridLines: {
               display: false,
               drawBorder: false,
            }
         }],
      },
      tooltips: {
         enabled: false,
         callbacks: {
            label: function(tooltipItems, data) {
               return " " + tooltipItems.xLabel + "%";
            }
         }
      },
   }
});
Chart.pluginService.register({
   afterDraw: function(chartInstance) {
      var ctx = chartInstance.chart.ctx;

      // render the value of the chart above the bar
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'right';
      ctx.textBaseline = 'center';

      chartInstance.data.datasets.forEach(function(dataset) {
         for (var i = 0; i < dataset.data.length; i++) {
            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            if (dataset.label[i] == "Confort projeté") {
               ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x - 8, model.y + 21);
               ctx.fillText("▲", model.x + 6, model.y + 19);
            } else if (dataset.label[i] == "Confort actuel") {
               ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x - 8, model.y - 14);
               ctx.fillText("▼", model.x + 6, model.y - 12);
            } else {
               ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x + 130, model.y - 14);
               ctx.fillText("▼", model.x + 6, model.y - 12);
            }
         }
      });
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>