<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Livello_1' x='0px' y='0px' viewBox='0 0 150 100' xml:space='preserve'>
<defs>
<linearGradient id='gradient1' x1='0' y1='25' x2='0' y2='50' gradientUnits='userSpaceOnUse'>
<stop stop-color='#cd62db' offset='0'></stop>
<stop stop-color='#0c2e89' offset='1'></stop>
</linearGradient>
</defs>
<polyline style='fill=: url(#gradient1)' fill-opacity='0.1' stroke='#0c2e89'
stroke-width='1' points='0 150 0,83 1,84 2,77 3,76 4,79 6,79 7,76 8,77 9,75 10,77 12,79 13,82 14,86 15,90 16,89 18,90 19,96 20,97 21,90 22,93 24,96 25,87 26,96 27,95 28,82 30,82 31,87 32,83 33,90 34,87 36,100 37,95 38,97 39,96 40,91 42,91 43,80 44,73 45,75 46,74 48,83 49,86 50,83 51,74 52,81 54,86 55,75 56,77 57,86 58,84 60,87 61,94 62,93 63,89 64,86 66,86 67,87 68,88 69,88 70,95 150 100 Z'/>
<text font-family='Segoe UI' font-size='24' x='90' y='20'> 98%</text>
</svg>I am trying to apply gradient fill in the area chart but it's not working
The second number in the points attribute is 150. This confuses things because the gradient will end 50 units below the bottom edge of the SVG. Changing that to 100, and making the gradientUnits objectBoundingBox (the default) will make more sense.
I also removed the opacity-fill because it was really hard to see the gradient in the first place.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100" style="height: 100vh;">
<defs>
<linearGradient id="gradient1" x1="0" y1="0" x2="0" y2="1"
gradientUnits="objectBoundingBox">
<stop stop-color="#cd62db" offset="0"/>
<stop stop-color="#0c2e89" offset="1"/>
</linearGradient>
</defs>
<polyline fill="url(#gradient1)" stroke="#0c2e89" stroke-width="1"
points="0 100 0,83 1,84 2,77 3,76 4,79 6,79 7,76 8,77 9,75 10,77 12,79 13,82 14,86 15,90 16,89 18,90 19,96 20,97 21,90 22,93 24,96 25,87 26,96 27,95 28,82 30,82 31,87 32,83 33,90 34,87 36,100 37,95 38,97 39,96 40,91 42,91 43,80 44,73 45,75 46,74 48,83 49,86 50,83 51,74 52,81 54,86 55,75 56,77 57,86 58,84 60,87 61,94 62,93 63,89 64,86 66,86 67,87 68,88 69,88 70,95 150 100 Z"/>
<text font-family="Segoe UI" font-size="24" x="90" y="20"> 98%</text>
</svg>