Кажется я нашел решение
jsfiddle.net/azuL1ets/1
Решение простое. Нужно просто знать svg. Делаем градиент для линии.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="440">
<!-- CHARTS GRADIENT -->
<defs>
<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="50" y1="350" x2="50" y2="220">
<stop offset="0%" style="stop-color:#00ff43;" />
<stop offset="50%" style="stop-color:#f9fd27;" />
<stop offset="100%" style="stop-color:#f20000;" />
</linearGradient>
</defs>
<!-- CHART -->
<polyline points="
50,350
60,340
70,345
80,330
90,320
100,325
" style="fill:none;" stroke="url(#grad1)" stroke-width="3" stroke-linecap="round" />
</svg>
