custom-series/segmentedDoughnut/screenshots/segmentedDoughnut.svg

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 600 400">
<rect width="600" height="400" x="0" y="0" fill="none"></rect>
<path d="M150 86A15 15 0 0 1 167 71.1A130 130 0 0 1 225.5 94.2A15 15 0 0 1 227.8 116.6L227.8 116.6A15 15 0 0 1 208.1 118.6A100 100 0 0 0 163 100.9A15 15 0 0 1 150 86Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M230.6 119.4A15 15 0 0 1 253.1 120.9A130 130 0 0 1 278.2 178.6A15 15 0 0 1 263.9 196L263.9 196A15 15 0 0 1 248.6 183.5A100 100 0 0 0 229.3 139.1A15 15 0 0 1 230.6 119.4Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M264 200A15 15 0 0 1 278.9 217A130 130 0 0 1 255.8 275.5A15 15 0 0 1 233.4 277.8L233.4 277.8A15 15 0 0 1 231.4 258.1A100 100 0 0 0 249.1 213A15 15 0 0 1 264 200Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M230.6 280.6A15 15 0 0 1 229.1 303.1A130 130 0 0 1 171.4 328.2A15 15 0 0 1 154 313.9L154 313.9A15 15 0 0 1 166.5 298.6A100 100 0 0 0 210.9 279.3A15 15 0 0 1 230.6 280.6Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M150 314A15 15 0 0 1 133 328.9A130 130 0 0 1 74.5 305.8A15 15 0 0 1 72.2 283.4L72.2 283.4A15 15 0 0 1 91.9 281.4A100 100 0 0 0 137 299.1A15 15 0 0 1 150 314Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M69.4 280.6A15 15 0 0 1 46.9 279.1A130 130 0 0 1 21.8 221.4A15 15 0 0 1 36.1 204L36.1 204A15 15 0 0 1 51.4 216.5A100 100 0 0 0 70.7 260.9A15 15 0 0 1 69.4 280.6Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M36 200A15 15 0 0 1 21.1 183A130 130 0 0 1 44.2 124.5A15 15 0 0 1 66.6 122.2L66.6 122.2A15 15 0 0 1 68.6 141.9A100 100 0 0 0 50.9 187A15 15 0 0 1 36 200Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M69.4 119.4A15 15 0 0 1 70.9 96.9A130 130 0 0 1 128.6 71.8A15 15 0 0 1 146 86.1L146 86.1A15 15 0 0 1 133.5 101.4A100 100 0 0 0 89.1 120.7A15 15 0 0 1 69.4 119.4Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M150 86A15 15 0 0 1 167 71.1A130 130 0 0 1 225.5 94.2A15 15 0 0 1 227.8 116.6L227.8 116.6A15 15 0 0 1 208.1 118.6A100 100 0 0 0 163 100.9A15 15 0 0 1 150 86Z" fill="#5070dd" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
<path d="M230.6 119.4A15 15 0 0 1 253.1 120.9A130 130 0 0 1 278.2 178.6A15 15 0 0 1 263.9 196L263.9 196A15 15 0 0 1 248.6 183.5A100 100 0 0 0 229.3 139.1A15 15 0 0 1 230.6 119.4Z" fill="#5070dd" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
<path d="M264 200A15 15 0 0 1 278.9 217A130 130 0 0 1 255.8 275.5A15 15 0 0 1 233.4 277.8L233.4 277.8A15 15 0 0 1 231.4 258.1A100 100 0 0 0 249.1 213A15 15 0 0 1 264 200Z" fill="#5070dd" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
<path d="M230.6 280.6A15 15 0 0 1 229.1 303.1A130 130 0 0 1 171.4 328.2A15 15 0 0 1 154 313.9L154 313.9A15 15 0 0 1 166.5 298.6A100 100 0 0 0 210.9 279.3A15 15 0 0 1 230.6 280.6Z" fill="#5070dd" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
<path d="M150 314A15 15 0 0 1 133 328.9A130 130 0 0 1 74.5 305.8A15 15 0 0 1 72.2 283.4L72.2 283.4A15 15 0 0 1 91.9 281.4A100 100 0 0 0 137 299.1A15 15 0 0 1 150 314Z" fill="#5070dd" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
<text dominant-baseline="central" text-anchor="middle" style="font-size:35px;font-family:sans-serif;" transform="translate(150 200)" fill="#555">5/8</text>
<path d="M450 86A15 15 0 0 1 467 71.1A130 130 0 0 1 550.3 117.3A15 15 0 0 1 546.7 139.6L546.7 139.6A15 15 0 0 1 527.2 136.4A100 100 0 0 0 463 100.9A15 15 0 0 1 450 86Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M548.7 143A15 15 0 0 1 570.1 150.2A130 130 0 0 1 571.8 245.5A15 15 0 0 1 550.7 253.5L550.7 253.5A15 15 0 0 1 543.7 235A100 100 0 0 0 542.4 161.7A15 15 0 0 1 548.7 143Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M548.7 257A15 15 0 0 1 553.1 279.1A130 130 0 0 1 471.4 328.2A15 15 0 0 1 454 313.9L454 313.9A15 15 0 0 1 466.5 298.6A100 100 0 0 0 529.3 260.9A15 15 0 0 1 548.7 257Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M450 314A15 15 0 0 1 433 328.9A130 130 0 0 1 349.7 282.7A15 15 0 0 1 353.3 260.4L353.3 260.4A15 15 0 0 1 372.8 263.6A100 100 0 0 0 437 299.1A15 15 0 0 1 450 314Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M351.3 257A15 15 0 0 1 329.9 249.8A130 130 0 0 1 328.2 154.5A15 15 0 0 1 349.3 146.5L349.3 146.5A15 15 0 0 1 356.3 165A100 100 0 0 0 357.6 238.3A15 15 0 0 1 351.3 257Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M351.3 143A15 15 0 0 1 346.9 120.9A130 130 0 0 1 428.6 71.8A15 15 0 0 1 446 86.1L446 86.1A15 15 0 0 1 433.5 101.4A100 100 0 0 0 370.7 139.1A15 15 0 0 1 351.3 143Z" fill="rgb(180,180,180)" fill-opacity="0.2" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" ecmeta_silent="true" class="zr0-cls-0"></path>
<path d="M450 86A15 15 0 0 1 467 71.1A130 130 0 0 1 550.3 117.3A15 15 0 0 1 546.7 139.6L546.7 139.6A15 15 0 0 1 527.2 136.4A100 100 0 0 0 463 100.9A15 15 0 0 1 450 86Z" fill="#b6d634" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-2"></path>
<path d="M548.7 143A15 15 0 0 1 570.1 150.2A130 130 0 0 1 571.8 245.5A15 15 0 0 1 550.7 253.5L550.7 253.5A15 15 0 0 1 543.7 235A100 100 0 0 0 542.4 161.7A15 15 0 0 1 548.7 143Z" fill="#b6d634" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-2"></path>
<path d="M548.7 257A15 15 0 0 1 553.1 279.1A130 130 0 0 1 471.4 328.2A15 15 0 0 1 454 313.9L454 313.9A15 15 0 0 1 466.5 298.6A100 100 0 0 0 529.3 260.9A15 15 0 0 1 548.7 257Z" fill="#b6d634" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-2"></path>
<path d="M450 314A15 15 0 0 1 433 328.9A130 130 0 0 1 349.7 282.7A15 15 0 0 1 353.3 260.4L353.3 260.4A15 15 0 0 1 372.8 263.6A100 100 0 0 0 437 299.1A15 15 0 0 1 450 314Z" fill="#b6d634" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-2"></path>
<path d="M351.3 257A15 15 0 0 1 329.9 249.8A130 130 0 0 1 328.2 154.5A15 15 0 0 1 349.3 146.5L349.3 146.5A15 15 0 0 1 356.3 165A100 100 0 0 0 357.6 238.3A15 15 0 0 1 351.3 257Z" fill="#b6d634" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-2"></path>
<path d="M351.3 143A15 15 0 0 1 346.9 120.9A130 130 0 0 1 428.6 71.8A15 15 0 0 1 446 86.1L446 86.1A15 15 0 0 1 433.5 101.4A100 100 0 0 0 370.7 139.1A15 15 0 0 1 351.3 143Z" fill="#b6d634" ecmeta_series_index="1" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-2"></path>
<text dominant-baseline="central" text-anchor="middle" style="font-size:35px;font-family:sans-serif;" xml:space="preserve" transform="translate(450 200)" fill="#555">100% 🎉</text>
<style ><![CDATA[
.zr0-cls-0:hover {
pointer-events:none;
}
.zr0-cls-1:hover {
cursor:pointer;
fill:rgba(88,123,243,1);
}
.zr0-cls-2:hover {
cursor:pointer;
fill:rgba(200,235,57,1);
}

]]>

</style>
</svg>