pm-controls/source/app/controls/components/chart/pie-chart/pie-chart.html

ProModel Controls

<div class="pie-chart">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 309.04 309">
        <defs>
            <style>
                .cls-1 {
                    fill: #36c;
                }

                .cls-1,
                .cls-3,
                .cls-4,
                .cls-5,
                .cls-6 {
                    stroke: #fff;
                }

                .cls-2 {
                    isolation: isolate;
                    font-size: 14px;
                    fill: #fff;
                    font-family: ArialMT, Arial;
                }

                .cls-3 {
                    fill: #909;
                }

                .cls-4 {
                    fill: #109618;
                }

                .cls-5 {
                    fill: #f90;
                }

                .cls-6 {
                    fill: #dc3912;
                }
            </style>
        </defs>
        <path class="cls-1" d="M161.54,162.5V8.5A154,154,0,0,1,201.4,311.25L161.54,162.5h0" transform="translate(-7 -8)"/>
        <text class="cls-2" transform="translate(253.7 143.78)">45.8%</text>
        <path class="cls-3" d="M161.54,162.5,12.79,202.36A154,154,0,0,1,161.54,8.5v154h0" transform="translate(-7 -8)"/>
        <text class="cls-2" transform="translate(39.74 86.27)">29.2%</text>
        <path class="cls-4" d="M161.54,162.5,52.64,271.39a153.93,153.93,0,0,1-39.85-69L161.54,162.5h0" transform="translate(-7 -8)"/>
        <text class="cls-2" transform="translate(32.46 220.93)">8.3%</text>
        <path class="cls-5" d="M161.54,162.5,121.68,311.25a153.94,153.94,0,0,1-69-39.86L161.54,162.5h0" transform="translate(-7 -8)"
        />
        <text class="cls-2" transform="translate(76.12 268.38)">8.3%</text>
        <path class="cls-6" d="M161.54,162.5,201.4,311.25a153.94,153.94,0,0,1-79.72,0L161.54,162.5h0" transform="translate(-7 -8)"
        />
        <text class="cls-2" transform="translate(139.04 291.54)">8.3%</text>
    </svg>
</div>