Estoy trabajando en un gráfico de anillos de múltiples niveles y estoy tratando de hacer que los colores de los dos conjuntos de datos se mezclen en los bordes dentro de cada anillo y no estoy seguro de si es posible.

Usaré datos dinámicos en el gráfico. Agregué colores de degradado radial a dos de los conjuntos de datos, pero eso no es lo que necesito porque está usando todo el lienzo, por lo que el degradado continúa de un conjunto de datos a otro y necesito uno separado para cada conjunto de datos.

Necesito que la parte Data2 sea azul y Data1 sea roja y que se mezclen cerca del borde.

También intenté usar un complemento de gradiente, pero parece que no funciona en los gráficos de anillos.

Estoy usando la versión React Wrapped Chartjs por cierto.

Este es el gráfico en cuestión:
https://codesandbox.io/s/sharp-leftpad-ls98m?file=/src/charts/doughnut.js

¡Cualquier ayuda sería apreciada!