Вы реализуете заливку при помощи линейного градиента (linear gradient), а вам нужен угловой градиент (angle gradient) или иногда его называют конический градиент (conic gradient). На сколько я знаю SVG, CSS, и прочие канвасы его делать не умеют, потому что W3C никак не могут договориться по каким формулам его считать.
Попробуйте погуглить: вероятно его можно как-то через одно место эмулировать, но лично я бы в продакшн не стал кривые решения тащить, проще договориться с дизайнером о переделке диаграммы.