{"id":2090,"date":"2026-07-02T09:35:52","date_gmt":"2026-07-02T09:35:52","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-pie-chart-syntax-data-guide\/"},"modified":"2026-07-02T09:35:52","modified_gmt":"2026-07-02T09:35:52","slug":"mermaid-js-pie-chart-syntax-data-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","title":{"rendered":"Panduan Sintaks dan Data Grafik Pie Mermaid.js"},"content":{"rendered":"<p>Grafik pie adalah grafik statistik berbentuk lingkaran yang digunakan untuk menampilkan proporsi numerik dengan membagi data menjadi potongan-potongan. Dalam Mermaid.js, Anda dapat membuat pemecahan data yang bersih dan responsif secara otomatis tanpa harus bersusah payah dengan perpustakaan grafik yang rumit atau alat desain vektor. Mesin rendering menangani semua penugasan warna dan perhitungan persentase secara dinamis.<\/p>\n<h2>Struktur Sintaks Dasar<\/h2>\n<p>Setiap grafik pie dimulai dengan <code>pie<\/code> deklarasi. Anda dapat secara opsional menyertakan judul, diikuti oleh entri data di mana label kategori dibungkus dengan tanda petik dan dipasangkan dengan nilai numerik positif.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNoryEzl5SrJLMlJVQhOzC0AUgGZqQrOGYlFJbxcSs6JJanp+UWVCo5KClYKJqbIQk4gIWMDZCFnkJCRKQA7Oxfc\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNoryEzl5SrJLMlJVXAvSkzLzFYIyExVcM7PK8nP4OVS8k4sSU3PL8pUcFRSsFIwMUUWcgIJGRsgCzmDhIxMAVpAGC8=\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">pie\r\ntitle Grafik Pie Contoh\r\n\"Kategori A\" : 45\r\n\"Kategori B\" : 30\r\n\"Kategori C\" : 25<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNoryEzl5SrJLMlJVXAvSkzLzFYIyExVcM7PK8nP4OVS8k4sSU3PL8pUcFRSsFIwMUUWcgIJGRsgCzmDhIxMAVpAGC8=\" \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 Mermaid 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\/#mermaid:eNoryEzl5SrJLMlJVQhOzC0AUgGZqQrOGYlFJbxcSs6JJanp+UWVCo5KClYKJqbIQk4gIWMDZCFnkJCRKQA7Oxfc\" 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 Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"tMloqNP\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-906\" decoding=\"async\" fetchpriority=\"high\" height=\"450\" sizes=\"(max-width: 595px) 100vw, 595px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png 595w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838-300x227.png 300w\" width=\"595\"\/><\/p>\n<h2>Referensi Sintaks<\/h2>\n<p>Tabel di bawah ini menjelaskan opsi struktural inti yang digunakan untuk membuat peta grafik pie di Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Komponen<\/th>\n<th>Deskripsi<\/th>\n<th>Contoh Sintaks<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Deklarasi<\/strong><\/td>\n<td>Menginisialisasi mesin rendering grafik pie.<\/td>\n<td><code>pie<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Bendera Tampilkan Data<\/strong><\/td>\n<td>Sebuah modifikasi opsional yang ditambahkan tepat setelah<code>pie<\/code>untuk menampilkan angka aktual bersamaan dengan persentase yang dihitung.<\/td>\n<td><code>pie showData<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Judul<\/strong><\/td>\n<td>Sebuah judul opsional yang dicetak dengan jelas di atas pusat tata letak diagram.<\/td>\n<td><code>title Sumber Pendapatan Q3<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Label Entri Data<\/strong><\/td>\n<td>Nama kategori, yang harus selalu dikelilingi tanda petik ganda.<\/td>\n<td><code>\"Pencarian Organik\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Pemisah Data<\/strong><\/td>\n<td>Karakter titik dua yang memisahkan string label Anda dari nilai matematisnya.<\/td>\n<td><code>:<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Nilai Data<\/strong><\/td>\n<td>Sebuah angka positif. Mendukung jumlah absolut atau bobot desimal langsung hingga dua tempat desimal.<\/td>\n<td><code>54.25<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Rancangan Dunia Nyata: Sumber Lalu Lintas Situs Web<\/h2>\n<p>Rancangan ini menunjukkan pemecahan dasbor pemasaran dan analitik klasik. Ini menggunakan parameter <code>showData<\/code> untuk secara eksplisit menampilkan metrik lalu lintas mentah langsung di dalam legenda, sementara grafik menampilkan proporsi tata letak.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo1y0EKwjAQQNG94B2GnqCtrVS3rUsRjBcY4qQZSJMyCXh9M4Lb\/\/g7E2SfPgsWhMIlEMxJCF6CzrGF2WOMFPLx0DxkxViTIRTrG7jCaRzaCgsL2fJfFPqhUzDJMga405tRczeNmp\/kSKSC4UJZ4dJrv23IAWbcduQ1\/uA8tV81oDA3\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNyksKwjAUheG54B4uXUFbW6mOdSBGFLuCg4Z42\/S25IG4exNHjg58\/1lYk3\/N7wMCKHCwmnrY6CCk0pJiCfB0ksDrVXHT8oDjFK\/OQHgsaE+btilT+78riPFRTM51U+V80U8G9bNn2MxV12buOURP9zjEEZJ9V2c+Y1ogH03HCfz7b7vyC7JcNDc=\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">pie showData title Saluran Lalu Lintas Inti\r\n\"Pencarian Organik\" : 3540\r\n\"Lalu Lintas Langsung\" : 2410\r\n\"Media Sosial\" : 1850\r\n\"Situs Rujukan\" : 920\r\n\"Kampanye Email\" : 680<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNyksKwjAUheG54B4uXUFbW6mOdSBGFLuCg4Z42\/S25IG4exNHjg58\/1lYk3\/N7wMCKHCwmnrY6CCk0pJiCfB0ksDrVXHT8oDjFK\/OQHgsaE+btilT+78riPFRTM51U+V80U8G9bNn2MxV12buOURP9zjEEZJ9V2c+Y1ogH03HCfz7b7vyC7JcNDc=\" \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 Mermaid 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\/#mermaid:eNo1y0EKwjAQQNG94B2GnqCtrVS3rUsRjBcY4qQZSJMyCXh9M4Lb\/\/g7E2SfPgsWhMIlEMxJCF6CzrGF2WOMFPLx0DxkxViTIRTrG7jCaRzaCgsL2fJfFPqhUzDJMga405tRczeNmp\/kSKSC4UJZ4dJrv23IAWbcduQ1\/uA8tV81oDA3\" 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 Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"zCZZawO\"><img alt=\"\" class=\"alignnone size-full wp-image-907\" decoding=\"async\" height=\"450\" sizes=\"(max-width: 684px) 100vw, 684px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46314896f59.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46314896f59.png 684w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46314896f59-300x197.png 300w\" width=\"684\"\/><\/p>\n<hr\/>\n<p><em><strong>Kiat Sintaks:<\/strong> Secara default, Mermaid hanya menampilkan persentase yang dihitung relatif (misalnya, 35%) di atas setiap bagian grafik. Menambahkan kata kunci <code>showData<\/code> secara langsung setelah <code>pie<\/code> mengubah label untuk menampilkan persentase di grafik dan nilai mentah yang tepat di dalam daftar legenda yang menyertainya.<\/em><\/p>\n<hr\/>\n<h2>Konsep Lanjutan: Arahkan &amp; Format<\/h2>\n<p>Untuk halaman dokumentasi dengan kepadatan tinggi, Anda dapat menerapkan arahan konfigurasi inline di bagian atas potongan kode Anda untuk menyesuaikan perilaku gaya, mengubah offset penempatan teks, atau mengubah gaya garis struktural.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjsGKwkAMhu+FvkPoYW8t1VUPvbkKnkRhwT2PnWwbnE5KJq0+\/s4UYU+B\/\/vzJWVZ5lnL\/pe6Js8ARsJlAii+9MqBlNg3UFe7FGuPA96MkLk7DO9m3LlMivKtwg\/8Iat9A8Xn+CryrEz+WAAldQiXEcUko3HwNdkOFfbOcbtkeVZche3UKhxxRsfjgF4LaGBTV9tIz0YeqOQ7+ICT8FP7BNfbap3oYQrKA8r\/kbDguqoj3duBPAVNZI6PzCg9Gpsaq00U\/AGp9VED\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNotjUGOgzAMRfdI3MFiMTsQQ9tZsGMuUKRKM2szeIJF4qDESD1+E8rK0n\/vf9d1XRZ\/Xv7Z9GUBsDEdF0DpqaOPrOylh7b5yrEu5OgHA+NkKZ5m6tx3pfDQ4Ff65VmXHqrL9qzKos77SQBltQSD9StGhkGMwYAC941CCrygLYtqJDHkJhST0Bj8vK8V9HBtm9tBHcaj9QEjBd3dtC8o2ehuTZeVcy5hi\/nFG7ZNm9g3IQyzY+GoWcro85p6L+cCTkY=\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">---\r\nconfig:\r\n  pie:\r\n    textPosition: 0.6\r\n  themeVariables:\r\n    pieOuterStrokeWidth: \"3px\"\r\n---\r\npie title Alokasi Anggaran Operasional\r\n\"Pengembangan Produk\" : 40.5\r\n\"Pemasaran &amp; Pertumbuhan\" : 25.25\r\n\"Operasi Pelanggan\" : 20.0\r\n\"Bea Administrasi\" : 14.25<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNotjUGOgzAMRfdI3MFiMTsQQ9tZsGMuUKRKM2szeIJF4qDESD1+E8rK0n\/vf9d1XRZ\/Xv7Z9GUBsDEdF0DpqaOPrOylh7b5yrEu5OgHA+NkKZ5m6tx3pfDQ4Ff65VmXHqrL9qzKos77SQBltQSD9StGhkGMwYAC941CCrygLYtqJDHkJhST0Bj8vK8V9HBtm9tBHcaj9QEjBd3dtC8o2ehuTZeVcy5hi\/nFG7ZNm9g3IQyzY+GoWcro85p6L+cCTkY=\" \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 Mermaid 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\/#mermaid:eNpFjsGKwkAMhu+FvkPoYW8t1VUPvbkKnkRhwT2PnWwbnE5KJq0+\/s4UYU+B\/\/vzJWVZ5lnL\/pe6Js8ARsJlAii+9MqBlNg3UFe7FGuPA96MkLk7DO9m3LlMivKtwg\/8Iat9A8Xn+CryrEz+WAAldQiXEcUko3HwNdkOFfbOcbtkeVZche3UKhxxRsfjgF4LaGBTV9tIz0YeqOQ7+ICT8FP7BNfbap3oYQrKA8r\/kbDguqoj3duBPAVNZI6PzCg9Gpsaq00U\/AGp9VED\" 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 Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"cNQyAwW\"><img alt=\"\" class=\"alignnone size-full wp-image-908\" decoding=\"async\" height=\"450\" sizes=\"(max-width: 700px) 100vw, 700px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a463155bf5dd.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a463155bf5dd.png 700w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a463155bf5dd-300x193.png 300w\" width=\"700\"\/><\/p>\n<h2>Kesalahan Umum Sintaks<\/h2>\n<p>Meskipun grafik pie memiliki salah satu sintaks paling sederhana di Mermaid, beberapa kesalahan format akan menyebabkan kegagalan pemrosesan tata letak. Hindari kesalahan umum ini:<\/p>\n<ul>\n<li><strong>Angka Negatif:<\/strong> Mesin rendering hanya menerima nilai numerik positif. Melewatkan nilai negatif atau nol akan melanggar batas pemrosesan matematis.<\/li>\n<li><strong>Persyaratan Kutipan:<\/strong> Label kategori data harus selalu menggunakan tanda petik ganda. Tanda petik tunggal atau tanda petik yang hilang akan gagal dibangun dengan benar.<\/li>\n<li><strong>Batasan Presisi Desimal:<\/strong> Meskipun Mermaid menangani desimal titik mengambang yang presisi dengan lancar, secara bawaan ia melacak parameter hingga dua tempat desimal. Pembulatan nilai terlebih dahulu mempertahankan konsistensi yang ketat.<\/li>\n<li><strong>Kepadatan Potongan:<\/strong> Untuk komunikasi visual yang bersih, merupakan praktik terbaik untuk membatasi grafik Anda hingga 6\u20138 potongan. Jika dataset Anda memiliki lebih banyak elemen, kelompokkan node-node kecil bersama di bawah kategori &#8216;Lainnya&#8217; agar desain Anda tetap mudah dibaca.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Grafik pie adalah grafik statistik berbentuk lingkaran yang digunakan untuk menampilkan proporsi numerik dengan membagi data menjadi potongan-potongan. Dalam Mermaid.js, Anda dapat membuat pemecahan data yang bersih dan responsif secara otomatis tanpa harus bersusah payah dengan perpustakaan grafik yang rumit&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":12,"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-2090","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>Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a 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\/mermaid-js-pie-chart-syntax-data-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-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_6a46313c62838.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=\"3 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\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\",\"name\":\"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"datePublished\":\"2026-07-02T09:35:52+00:00\",\"description\":\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-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\":\"Panduan Sintaks dan Data Grafik Pie Mermaid.js\"}]},{\"@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":"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide","description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a 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\/mermaid-js-pie-chart-syntax-data-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide","og_description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","name":"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png","datePublished":"2026-07-02T09:35:52+00:00","description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-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":"Panduan Sintaks dan Data Grafik Pie Mermaid.js"}]},{"@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\/2090","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=2090"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}