{"id":2065,"date":"2026-07-27T01:55:55","date_gmt":"2026-07-27T01:55:55","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/"},"modified":"2026-07-27T01:55:55","modified_gmt":"2026-07-27T01:55:55","slug":"doughnut-chart-ring-based-proportions-and-center-metrics-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","title":{"rendered":"Diagram Donat: Proporsi Berbasis Cincin dan Metrik Pusat"},"content":{"rendered":"<p>Ketika menyajikan alokasi kategori relatif, <strong>Diagram Donat<\/strong>menawarkan alternatif modern dengan kontras tinggi dibandingkan diagram pie padat tradisional. Dengan menghilangkan inti pusat, diagram donat mengalihkan fokus visual dari ukuran area yang terisi ke panjang busur sepanjang cincin luar. Pusat yang kosong ini menciptakan ruang visual utama untuk metrik kinerja utama, total ringkasan, atau indikator status\u2014membuatnya menjadi komponen standar untuk dashboard status eksekutif dan ringkasan keuangan.<\/p>\n<h2>Mekanisme Diagram Donat<\/h2>\n<p>Dalam Apache ECharts, diagram donat dikonfigurasi menggunakan <code>'pie'<\/code>tipe seri yang dipasangkan dengan array dua elemen <code>radius<\/code>array: <code>['innerRadius', 'outerRadius']<\/code>. Nilai pertama menentukan pembukaan pusat yang kosong, sedangkan nilai kedua mengendalikan batas luar.<\/p>\n<h3>1. Pengaturan Dasar<\/h3>\n<p>Untuk membuat diagram donat standar, deklarasikan seri dengan <code>type: 'pie'<\/code>, atur <code>radius: ['50%', '70%']<\/code>, dan lewatkan objek data Anda dengan <code>name<\/code> dan <code>value<\/code>properti:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFkD9rwzAQxfdAvoOWoBYyuCQmxqVDC91aMmQsGS72RRVVJCHLKcXou\/fsJP6XwVqE7t7vnd4Z66XR7IVV8xmj441RXtr09m5qTgqBLmVcejzxZdc5GncC75teBYHNZ9UhEJsF9lDlYfHIL9pwZRQK1PnQ3NAwHi\/6tgqPnooZarIeWRToJBYp++rkPbf6aDgh0W9lLtCzV6VMBnXI\/oRm8p+tdVbiuOMgl2U9g8cRfYzxDV37kejyu54oju9FcDYy\/4ADqu0ZnQLK6l2JI5WqBek4R5P22\/ym7AiqwGEzjCxy8DBYSrscdgZVUtCnaJ0sb8t510JqpFVqwe+8BthmFbfUJ7gf9NNMnEQts7XomvUXE9A6WbfQDhRO6VdRN2RXWmucJ2II7LvntUOV8PwPkryuSA==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFkT9rwzAQxfdAvoOWoBYyuMQmxqVDoGMhHbqVDJf47KqWJSNLLsXou1dWEv8LNFqM7t7vPd1ZVppJQV5Iu1wQd7SUXLMqud59TbE8R5UQyjSWdD10MqlK0Nr3WrBkuWiP1rEnSx7a1K4e6VlrLwzHHEU6NZcujEarsS3HTLviCYWznlnUqBjWCfkc5CO37ggo0dE7LguoGdmJPAcFYhzgg3+rTlYxnHcUpMx0ETQK3LsI3brPYSY6P24kiqJbETSSpW9wRL5vUHFwo2plcKbinSCZj+GH\/ZI\/CcmA1zht2plFChomO+l3Qxrgxg36FITx+rqbDywEK+iNzYTYbqIeeMcSar\/F\/5koDnpmX6FyP+AOEcbhKEV8G+B3UzbBkPJqCiNyj0yJw3C9dFzFPv8BYuasUA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        trigger: 'item',\r\n        formatter: '{a} \r\n{b}: {c} ({d}%)'\r\n    },\r\n    legend: {\r\n        top: '5%',\r\n        left: 'center'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Alokasi Anggaran',\r\n            type: 'pie',\r\n            radius: ['50%', '70%'],\r\n            center: ['50%', '55%'],\r\n            avoidLabelOverlap: true,\r\n            label: {\r\n                show: false\r\n            },\r\n            data: [\r\n                { value: 1048, name: 'Teknik' },\r\n                { value: 735, name: 'Pemasaran' },\r\n                { value: 580, name: 'Operasi' },\r\n                { value: 484, name: 'Penjualan' },\r\n                { value: 300, name: 'Dukungan' }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFkT9rwzAQxfdAvoOWoBYyuMQmxqVDoGMhHbqVDJf47KqWJSNLLsXou1dWEv8LNFqM7t7vPd1ZVppJQV5Iu1wQd7SUXLMqud59TbE8R5UQyjSWdD10MqlK0Nr3WrBkuWiP1rEnSx7a1K4e6VlrLwzHHEU6NZcujEarsS3HTLviCYWznlnUqBjWCfkc5CO37ggo0dE7LguoGdmJPAcFYhzgg3+rTlYxnHcUpMx0ETQK3LsI3brPYSY6P24kiqJbETSSpW9wRL5vUHFwo2plcKbinSCZj+GH\/ZI\/CcmA1zht2plFChomO+l3Qxrgxg36FITx+rqbDywEK+iNzYTYbqIeeMcSar\/F\/5koDnpmX6FyP+AOEcbhKEV8G+B3UzbBkPJqCiNyj0yJw3C9dFzFPv8BYuasUA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFkD9rwzAQxfdAvoOWoBYyuCQmxqVDC91aMmQsGS72RRVVJCHLKcXou\/fsJP6XwVqE7t7vnd4Z66XR7IVV8xmj441RXtr09m5qTgqBLmVcejzxZdc5GncC75teBYHNZ9UhEJsF9lDlYfHIL9pwZRQK1PnQ3NAwHi\/6tgqPnooZarIeWRToJBYp++rkPbf6aDgh0W9lLtCzV6VMBnXI\/oRm8p+tdVbiuOMgl2U9g8cRfYzxDV37kejyu54oju9FcDYy\/4ADqu0ZnQLK6l2JI5WqBek4R5P22\/ym7AiqwGEzjCxy8DBYSrscdgZVUtCnaJ0sb8t510JqpFVqwe+8BthmFbfUJ7gf9NNMnEQts7XomvUXE9A6WbfQDhRO6VdRN2RXWmucJ2II7LvntUOV8PwPkryuSA==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"qZuZYKI\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-1316\" decoding=\"async\" fetchpriority=\"high\" height=\"1300\" sizes=\"(max-width: 1088px) 100vw, 1088px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png 1088w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a-251x300.png 251w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a-857x1024.png 857w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a-768x918.png 768w\" width=\"1088\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Teknik Struktural Lanjutan<\/h2>\n<p>Diagram donat unggul ketika dipasangkan dengan statistik pusat atau gaya visual melengkung untuk menciptakan komponen antarmuka pengguna yang rapi.<\/p>\n<h3>1. Overlay Statistik Label Pusat<\/h3>\n<p>Gunakan elemen grafis atau komponen judul pusat untuk menampilkan total keseluruhan atau KPI utama langsung di dalam cincin donat:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUz1vgzAQ3Sv1P1hqKy8MSfgIStWxUodKGYjUocpwwJFYcrBlG5K0yn+vTQoJ0Cq3APfeu\/O9M0IaJkryQr7v74gNwwzHRfvVZPBgFoQ++t40mFPvAugq\/cVWwgAnicTSXBM4Fg7NbBrVNWCEtPlg9tRL2lqJOQ66uyhEaRL2ZYFZ7I2hD2SbrWuUCp7TASETXCiLPfi+Ty\/QaTzHrd7T4L\/SURRdlz6\/th2MENww2bdUsc0GnZYZ3NG+QKNiqBfk88IfnKmEnT0PfT1YwzXq4cjmKB0sGQ4RBTmrXGkaTaz3hMb2sR6O1azLkcIzKfyDBLVg+TukyJc1Kg52vgK4xgGNO8bI02bKrdj\/avrgaVAiBwM9MzpTSA28couZBLHXmvIGKt+DQjoq1NPM\/bCTJAAJSapUZ4o1f4O+IQ7jSSdeFgXL0Mql5HZtN5RBHHTKlYIaOW3vSxvr0U2ymdPzD\/SU02U=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUj1vwjAQ3Sv1P1hqKy8ZgHwQUXWrusBQiWyI4SBuMHHsKLFVoYr\/3nNCmsS05RZ\/vPfu7HenSs2VJC\/k6\/6OYBxNasSiO9nQLK8XhD763jSYU68HarO7YInSIMgJZEZeec6EgSoHOeTmvOJI3DOpWTUEQIPNEMyehrcZnCBpcg8eYsPkpgL5pqRekFnsjUHNdoBvpzslUupgn1BJQOzB933aQ2en6Lr70z91p8FfuaMoGuZut10JrZTQvBylLlnB9walXLOCjvk1s5ZterLzJAmFLfrOZNY4Pja86SWT3JpbcuZCFaTcILah0QSdJzTGZeuQ2m5ZUtiSwl9IBy5TqHhiihL7n+CJH1awY9iIDxA1c+iihZy\/NP5AUXKBc3MRjhlnJ0+KgzNy58clIrkAdG46CWKvdwn9yXLQZIm7ml7lG0nnfvijXKEuAwmSrAHWN4RhPBmWFMzWRF\/IEqRW1Q11EAdD9RGErUu7QepiezVieHN+\/gbect8G\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    judul: {\r\n        teks: '$3,147',\r\n        subteks: 'Total yang Dikeluarkan',\r\n        kiri: 'center',\r\n        atas: '42%',\r\n        gayaTeks: {\r\n            ukuranFont: 28,\r\n            tebal: 'bold',\r\n            warna: '#333'\r\n        },\r\n        gayaSubteks: {\r\n            ukuranFont: 14,\r\n            warna: '#666'\r\n        }\r\n    },\r\n    tooltip: {\r\n        pemicu: 'item'\r\n    },\r\n    seri: [\r\n        {\r\n            nama: 'Pengeluaran',\r\n            jenis: 'pie',\r\n            radius: ['60%', '80%'],\r\n            center: ['50%', '50%'],\r\n            hindariTumpangTindihLabel: false,\r\n            label: {\r\n                tampilkan: false\r\n            },\r\n            data: [\r\n                { nilai: 1048, nama: 'Perangkat Keras' },\r\n                { nilai: 735, nama: 'Langganan SaaS' },\r\n                { nilai: 580, nama: 'Perlengkapan Kantor' },\r\n                { nilai: 484, nama: 'Perjalanan' }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUj1vwjAQ3Sv1P1hqKy8ZgHwQUXWrusBQiWyI4SBuMHHsKLFVoYr\/3nNCmsS05RZ\/vPfu7HenSs2VJC\/k6\/6OYBxNasSiO9nQLK8XhD763jSYU68HarO7YInSIMgJZEZeec6EgSoHOeTmvOJI3DOpWTUEQIPNEMyehrcZnCBpcg8eYsPkpgL5pqRekFnsjUHNdoBvpzslUupgn1BJQOzB933aQ2en6Lr70z91p8FfuaMoGuZut10JrZTQvBylLlnB9walXLOCjvk1s5ZterLzJAmFLfrOZNY4Pja86SWT3JpbcuZCFaTcILah0QSdJzTGZeuQ2m5ZUtiSwl9IBy5TqHhiihL7n+CJH1awY9iIDxA1c+iihZy\/NP5AUXKBc3MRjhlnJ0+KgzNy58clIrkAdG46CWKvdwn9yXLQZIm7ml7lG0nnfvijXKEuAwmSrAHWN4RhPBmWFMzWRF\/IEqRW1Q11EAdD9RGErUu7QepiezVieHN+\/gbect8G\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUz1vgzAQ3Sv1P1hqKy8MSfgIStWxUodKGYjUocpwwJFYcrBlG5K0yn+vTQoJ0Cq3APfeu\/O9M0IaJkryQr7v74gNwwzHRfvVZPBgFoQ++t40mFPvAugq\/cVWwgAnicTSXBM4Fg7NbBrVNWCEtPlg9tRL2lqJOQ66uyhEaRL2ZYFZ7I2hD2SbrWuUCp7TASETXCiLPfi+Ty\/QaTzHrd7T4L\/SURRdlz6\/th2MENww2bdUsc0GnZYZ3NG+QKNiqBfk88IfnKmEnT0PfT1YwzXq4cjmKB0sGQ4RBTmrXGkaTaz3hMb2sR6O1azLkcIzKfyDBLVg+TukyJc1Kg52vgK4xgGNO8bI02bKrdj\/avrgaVAiBwM9MzpTSA28couZBLHXmvIGKt+DQjoq1NPM\/bCTJAAJSapUZ4o1f4O+IQ7jSSdeFgXL0Mql5HZtN5RBHHTKlYIaOW3vSxvr0U2ymdPzD\/SU02U=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"nIFRHCY\"><img alt=\"\" class=\"alignnone size-full wp-image-1317\" decoding=\"async\" height=\"1236\" sizes=\"(max-width: 1236px) 100vw, 1236px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768.png 1236w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768-300x300.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768-1024x1024.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768-150x150.png 150w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768-768x768.png 768w\" width=\"1236\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Penyesuaian Layout dan Gaya Segment<\/h2>\n<p>Menambahkan radius sudut halus dan jarak margin segment yang berbeda memberikan tampilan ramping dan modern pada grafik donat.<\/p>\n<h3>1. Ujung Bulat dan Jarak Segment<\/h3>\n<p>Gunakan <code>itemStyle.borderRadius<\/code>bersamaan dengan batas putih yang jelas untuk memberikan setiap segment busur tampilan lembut seperti pil:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUTtrwzAQ3gv9DwfFaPHgFIeCS6eGbFliSoeSQY4ujUC2jHRuMcb\/vac2jbHz+gah032PQ2dr0raCF+ju74Dh0Wn0GXz8lQHdcA2oZIkZiJysk58Ib55PEY851NaBU+uTjpNKN8FfpPNIxCCekkhsJiRNWObUGvaYhAcU1il064PRLIkvUV6tsY7HeNj9QlwkvmtF+wzScb+f8I0s0JydyO\/tdwbkGjwTsbOulEQYJumKng1UH4nrUUqSHO3guAv4kqbhf0mT+H8TC7ttSqzIixOfkeRxfpSsUGkJS23wpmjIyVvPe4EFz3ZDNBuSlg4R8lpukTVjyWYoDx1+6Z9\/ABegkrU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUk1Lw0AQvQv+hwEJe8khlRQh4knxIoK0Bw+lhwmZxrG7s2GzOZSQ\/+5Ga2NiP95pZue9mQdvbeXZCjxAe30FATU5zmD10\/Roh7KHoMEM1BtJWTaCKBDKHZsKBUXFY\/InCdeBXTFNRw4LbsJspdJ5pGJQd0mk1hMSezJLv9OUTW30yK0ryC32i2ZJfIryaLV1wcbN5hvqJPGdC\/+RQTqedxO+xpz0UUceTcV6i5KBdw0dubOxzqD31Ntp8y5sKbpInb9XoMdRJIdoQFhjiCtN4t9gnuy2MSTq35aR4HZ+EDyzJnilgvGS5s+R4AiWXId4Lohmw6FFg1KG\/\/Jiaytl0I1l66HdT8JLd\/8FLKCYBw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    seri: [\r\n        {\r\n            nama: 'Penggunaan Penyimpanan',\r\n            jenis: 'pie',\r\n            radius: ['45%', '70%'],\r\n            itemStyle: {\r\n                borderRadius: 10,\r\n                borderColor: '#ffffff',\r\n                borderWidth: 4\r\n            },\r\n            label: {\r\n                tampilkan: true,\r\n                formatter: '{b}: {d}%'\r\n            },\r\n            data: [\r\n                { nilai: 40, nama: 'Dokumen' },\r\n                { nilai: 25, nama: 'File Media' },\r\n                { nilai: 20, nama: 'Data Sistem' },\r\n                { nilai: 15, nama: 'Ruangan Kosong' }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUk1Lw0AQvQv+hwEJe8khlRQh4knxIoK0Bw+lhwmZxrG7s2GzOZSQ\/+5Ga2NiP95pZue9mQdvbeXZCjxAe30FATU5zmD10\/Roh7KHoMEM1BtJWTaCKBDKHZsKBUXFY\/InCdeBXTFNRw4LbsJspdJ5pGJQd0mk1hMSezJLv9OUTW30yK0ryC32i2ZJfIryaLV1wcbN5hvqJPGdC\/+RQTqedxO+xpz0UUceTcV6i5KBdw0dubOxzqD31Ntp8y5sKbpInb9XoMdRJIdoQFhjiCtN4t9gnuy2MSTq35aR4HZ+EDyzJnilgvGS5s+R4AiWXId4Lohmw6FFg1KG\/\/Jiaytl0I1l66HdT8JLd\/8FLKCYBw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUTtrwzAQ3gv9DwfFaPHgFIeCS6eGbFliSoeSQY4ujUC2jHRuMcb\/vac2jbHz+gah032PQ2dr0raCF+ju74Dh0Wn0GXz8lQHdcA2oZIkZiJysk58Ib55PEY851NaBU+uTjpNKN8FfpPNIxCCekkhsJiRNWObUGvaYhAcU1il064PRLIkvUV6tsY7HeNj9QlwkvmtF+wzScb+f8I0s0JydyO\/tdwbkGjwTsbOulEQYJumKng1UH4nrUUqSHO3guAv4kqbhf0mT+H8TC7ttSqzIixOfkeRxfpSsUGkJS23wpmjIyVvPe4EFz3ZDNBuSlg4R8lpukTVjyWYoDx1+6Z9\/ABegkrU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"UvWZRED\"><img alt=\"\" class=\"alignnone size-full wp-image-1318\" decoding=\"async\" height=\"1114\" sizes=\"(max-width: 1641px) 100vw, 1641px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a.png 1641w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a-300x204.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a-1024x695.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a-768x521.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a-1536x1043.png 1536w\" width=\"1641\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Praktik Terbaik Strategis<\/h2>\n<ul>\n<li><strong>Optimalkan Rasio Jari-Jari Dalam terhadap Luar:<\/strong>Pertahankan jari-jari dalam antara 50% hingga 70% dari jari-jari luar agar segment cukup tebal untuk kemudahan hover, sambil mempertahankan ruang yang cukup di tengah.<\/li>\n<li><strong>Gunakan Ruang Tengah Secara Sengaja:<\/strong>Gunakan area kosong di tengah untuk menampilkan total keseluruhan atau metrik slice yang dipilih, alih-alih memenuhi keliling grafik dengan kotak teks tambahan.<\/li>\n<li><strong>Batasi Jumlah Slice:<\/strong>Batasi cincin menjadi 5 atau 6 segment utama. Jika Anda memiliki banyak kategori kecil, gabungkan menjadi kategori &#8216;Lainnya&#8217; untuk mencegah busur yang terlalu tipis dan tidak terbaca.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ketika menyajikan alokasi kategori relatif, Diagram Donatmenawarkan alternatif modern dengan kontras tinggi dibandingkan diagram pie padat tradisional. Dengan menghilangkan inti pusat, diagram donat mengalihkan fokus visual dari ukuran area yang terisi ke panjang busur sepanjang cincin luar. Pusat yang kosong&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":9,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2065","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\",\"name\":\"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bb32c140a.png\",\"datePublished\":\"2026-07-27T01:55:55+00:00\",\"description\":\"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bb32c140a.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bb32c140a.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diagram Donat: Proporsi Berbasis Cincin dan Metrik Pusat\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide","description":"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","og_locale":"id_ID","og_type":"article","og_title":"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide","og_description":"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","name":"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png","datePublished":"2026-07-27T01:55:55+00:00","description":"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Diagram Donat: Proporsi Berbasis Cincin dan Metrik Pusat"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2065"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}