In the graphic the idea was to put a shadow only on the white circle, but it looks like the shadow effect was applied to the text, which shouldn't happen.

Canvas:

   <canvas class="gradient" id="canvas_gradient_chart" height="70"></canvas>

Javascript:

 drawChartGradient(canvas, radian, height, metric) {
        const rect = canvas.getBoundingClientRect();
        const ctx = canvas.getContext("2d");
        canvas.width  = rect.width;
        canvas.height = height;
        ctx.beginPath();
      
        const centerY = canvas.height / 2;
        const centerX = this.positionXChart(canvas.width, metric, 20);
       
        ctx.arc(centerX, centerY, radian, 0, Math.PI * 2, false);
        ctx.fillStyle ="#ffffff";
        ctx.filter = 'drop-shadow(2px 2px 5px rgba(0,0,0,0.6))';
    
        ctx.fill();
       
        ctx.font = 'bold 14pt sans-serif';
        ctx.textAlign = 'center';
        ctx.strokeStyle ='#ffffff'
        ctx.stroke();
        ctx.fillStyle ="#622BCF";  // <-- Text colour here
        ctx.shadowBlur=0;
        ctx.shadowColor='transparent';
        ctx.fillText(`${metric ? metric : 0}`, centerX, centerY+8);
        //ctx.globalCompositeOperation = 'destination-over';
        ctx.globalCompositeOperation = 'source-over';
          canvas.addEventListener('mousemove', (e) => {
            const relativeCoodinates = {
              x:parseInt(`${centerX}`), 
              y:parseInt(`${centerY}`),
              r:radian
            }
          });
        ctx.globalCompositeOperation = 'destination-over';
        ctx.save();
        ctx.restore();
      }

      positionXChart(size, number, distance) {
       return size/(200 + distance) * (parseInt(`${number}`) + 100 + distance / 2);
      }

Canvas would render: