Как реализовать,кастомизировать диаграмму к следующему виду?

Если "элегантность" решения устраивает, то можно попробовать, вытащив из готовой SVG координаты , и подложить под него полупрозрачный объект из серии

<rect x="50" y="20" rx="150" ry="150" width="150" height="150" style="fill:red;stroke:black;stroke-width:9;opacity:0.5">

Куда проще с кастомными tooltip - там можно создать кастомную колонку и через опцию isHtml загонять красиво cтилизованный css контент