JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div id="etch-d3-donut-chart-example" class="etch">
    <svg width="260" height="220" class="etch-donut-chart">
        <g transform="translate(120,100)">
            <circle class="etch-donut-chart__background" cx="0" cy="0" r="74" fill-opacity="0.995"></circle>
        </g>
        <text dx="0" dy="5" class="etch-donut-chart__totalcount" transform="translate(120,100)" fill-opacity="0.995">13.5k</text>
        <text dx="0" dy="20" class="etch-donut-chart__totallabel" transform="translate(120,100)" fill-opacity="0.995">Static Chart</text>
        <g class="arc" transform="translate(120,100)">
            <g>
                <path d="M4.898587196589413e-15,-80A80,80 0 0,1 79.88211562510814,-4.341382643450448L67.89979828134193,-3.6901752469328803A68,68 0 0,0 4.1637991171010006e-15,-68Z" id="arc-0" class="etch-donut-chart__alert--rank5"></path>
            </g>
            <text dy="0.4ex" class="etch-donut-chart__label" style="text-anchor: start;" fill-opacity="0.995" transform="translate(55.527962726954414,-64.79904295120896)">24
                <tspan class="etch-donut-chart__label__units">%</tspan>
            </text>
        </g>
        <g class="arc" transform="translate(120,100)">
            <g>
                <path d="M79.88211562510814,-4.341382643450448A80,80 0 1,1 -13.138533512197,-78.91374365184353L-11.167753485367449,-67.076682104067A68,68 0 1,0 67.89979828134193,-3.6901752469328803Z" id="arc-1" class="etch-donut-chart__alert--rank3"></path>
            </g>
            <text dy="0.4ex" class="etch-donut-chart__label" style="text-anchor: end;" fill-opacity="0.995" transform="translate(-50.50846029785457,69.63559583448878)">73
                <tspan class="etch-donut-chart__label__units">%</tspan>
            </text>
        </g>
        <g class="arc" transform="translate(120,100)">
            <g>
                <path d="M-13.138533512197,-78.91374365184353A80,80 0 0,1 -1.4695761589768237e-14,-80L-1.2491397351303002e-14,-68A68,68 0 0,0...

CSS

.etch .etch-donut-chart {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.etch .etch-donut-chart--no-data {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.etch .etch-donut-chart--no-data .etch-donut-chart__background {
    fill: none;
    stroke: #aaa;
    stroke-width: 1.5;
    stroke-dasharray: 2, 2;
}
.etch .etch-donut-chart--no-data .etch-donut-chart__totalcount {
    fill: #aaa;
}
.etch .etch-donut-chart__background {
    fill: #fff;
    stroke: none;
}
.etch .etch-donut-chart__totalcount {
    font-family:'open_sans', "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
    font-weight: 400;
    font-style: normal;
    fill: #444;
    font-size: 26px;
    text-anchor: middle;
}
.etch .etch-donut-chart__totallabel {
    font-family:'open_sans', "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
    font-weight: 600;
    font-style: normal;
    fill: #aaa;
    font-size: 0.8em;
    text-anchor: middle;
    text-transform: uppercase;
}
.etch .etch-donut-chart__label {
    font-family:'open_sans', "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
    font-weight: 600;
    font-style: normal;
    fill: #444;
}
.etch .etch-donut-chart__label__units {
    font-size: 50%;
    font-weight: 400;
}
.etch .etch-donut-chart__alert--rank0 {
    fill: #757f8f;
}
.etch .etch-donut-chart__alert--rank1 {
    fill: #515761;
}
.etch .etch-donut-chart__alert--rank2 {
    fill: #7ba1c0;
}
.etch .etch-donut-chart__alert--rank3 {
    fill: #a1cf6b;
}
.etch .etch-donut-chart__alert--rank4 {
    fill: #aaa;
}
.etch .etch-donut-chart__alert--rank5 {
    fill: #8b94a2;
}
.etch .etch-donut-chart__alert--rank6 {
    fill: #62aa44;
}