title: Im not able to add a gradient to a bar in barchart using chart js is there any way to do it without the plugin-gradient being installed?
body: <pre class="lang-js prettyprint-override"><code>const SingleBarChartData = {
    count: 0,
    data: {
      labels: [
        ['Total'],
        ['Users'],
        ['Created'],
        ['Deleted'],
      ],
      datasets: [{
          data: [70, 6, 7, 1],
          categoryPercentage: 0.8,
          barPercentage: 0.7,
          borderRadius: (context) =&gt; {
            const borderRadius = [];
            if (context.dataset.data[context.dataIndex] &gt;= 69) {
              borderRadius.push('5');
            } else {
              borderRadius.push('0');
            }
            return borderRadius;
          },
          datalabels: {
            font: {
              size: '12',
              weight: 'bold',
            },
            anchor: (context) =&gt; {
              const anchor = [];
              if (context.dataset.data[context.dataIndex] &gt; 12) {
                anchor.push('end');
              } else {
                anchor.push('end');
              }
              return anchor;
            },
            align: (context) =&gt; {
              const align = [];
              if (context.dataset.data[context.dataIndex] &gt; 12) {
                align.push('start');
              } else {
                align.push('top');
              }
              return align;
            },
          },
        },
        {
          data: [70, 70, 70, 70],
          borderRadius: '5',
          maintainAspectRatio: false,
          responsive: true,
          categoryPercentage: 0.8,
          barPercentage: 0.7,
          xAxisID: 'x2',
          datalabels: {
            display: false,
          },
        },
      ],
    },
  };
  
  export const SingleBarChartOptions = {
    options: {
      responsive: true,
      maintainAspectRatio: false,
      tooltip: {
        enabled: true,
      },
      datasets: [{
        display: true,
        data: {
          SingleBarChartData
        },
        borderWidth: 1,
      }, ],
      scales: {
        x: {
          grid: {
            display: true,
            drawBorder: true,
            drawTicks: true,
            offset: false,
            color: 'transparent',
            tickColor: 'rgba(0,0,0,0.1)',
          },
          offset: true,
          ticks: {
            color: '#8A8A8A',
            maxRotation: 0,
            minRotation: 0,
            index: 0.5,
            font: {
              size: 8,
            },
          },
        },
        x2: {
          display: false,
        },
        y: {
          ticks: {
            display: true,
            color: '#8A8A8A',
            z: 1,
            font: {
              size: 8,
            },
            stepSize: 1,
            beginAtZero: true,
            //callback function for mapping values to convert as percentage for y-axis
            callback: function(label, count) {
              switch ((label, count)) {
                case 0:
                  return '0%';
                case 17:
                  return '25%';
                case 35:
                  return '50%';
                case 52:
                  return '75%';
                case 70:
                  return '100%';
              }
            },
          },
  
          grid: {
            display: true,
            color: '#8A8A8A',
            drawOnChartArea: false,
          },
        },
      },
      plugins: {
        legend: {
          display: false,
        },
      },
    },
  };
  </code></pre>