{"id":2056,"date":"2026-07-27T02:26:23","date_gmt":"2026-07-27T02:26:23","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/"},"modified":"2026-07-27T02:26:23","modified_gmt":"2026-07-27T02:26:23","slug":"sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","title":{"rendered":"Diagram Matahari: Hierarki Radial dan Pemecahan Cincin Multi-Tingkat"},"content":{"rendered":"

Ketika menyajikan hierarki multi-tier di mana cincin bagian dalam mewakili kategori tingkat tinggi dan cincin luar memecah kategori bawah, makaDiagram Matahari<\/strong> menawarkan alternatif radial yang bersih dibandingkan peta pohon. Dengan mengatur kategori bersarang ke dalam cincin konsentris, diagram matahari memungkinkan pengguna untuk mengeksplorasiproporsi struktural multi-level, hubungan induk-anak, dan jalur distribusi<\/em> dalam ruang yang ringkas\u2014seperti kategori produk global, bagan organisasi, atau jalur drop-off pengguna multi-langkah.<\/p>\n

Mekanisme Diagram Matahari<\/h2>\n

Di Apache ECharts, diagram matahari menggunakantype: 'sunburst'<\/code>. Mirip dengan peta pohon, seri mengharapkan struktur pohon bersarang dalam arraydata<\/code> array di mana objek induk berisichildren<\/code> array. Mesin merender simpul akar atau kategori tingkat atas dalam lingkaran paling dalam dan memperluas kategori bawah ke luar melintasi lapisan cincin konsentris.<\/p>\n

1. Pengaturan Dasar<\/h3>\n

Untuk membuat diagram matahari dasar, sediakan dataset pohon bersarang dan aturtype: 'sunburst'<\/code>di dalam objek seri Anda:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {\r\n        trigger: 'item',\r\n        formatter: '{b}: {c}'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'sunburst',\r\n            data: [\r\n                {\r\n                    name: 'Kakek',\r\n                    children: [\r\n                        {\r\n                            name: 'Orang Tua 1',\r\n                            value: 15,\r\n                            children: [\r\n                                { name: 'Anak 1', value: 5 },\r\n                                { name: 'Anak 2', value: 10 }\r\n                            ]\r\n                        },\r\n                        {\r\n                            name: 'Orang Tua 2',\r\n                            value: 10,\r\n                            children: [\r\n                                { name: 'Anak 3', value: 10 }\r\n                            ]\r\n                        }\r\n                    ]\r\n                }\r\n            ],\r\n            radius: [0, '90%'],\r\n            label: {\r\n                rotate: 'radial'\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Teknik Struktural Lanjutan<\/h2>\n
Diagram matahari dapat disesuaikan dengan aturan penataan tingkat cincin, pewarisan warna, dan drill-down interaktif klik-zoom.<\/p>\n
1. Penyesuaian Cincin Khusus Tingkat dan Drill-Down<\/h3>\n
Gunakanlevels<\/code> array untuk menentukan jari-jari yang berbeda, perilaku label, dan gaya item untuk setiap lapisan cincin konsentris dari pusat ke luar:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    tooltip: {\r\n        trigger: 'item'\r\n    },\r\n    legend: {\r\n        top: '2%',\r\n        left: 'center',\r\n        data: ['Elektronik', 'Rumah & Kehidupan']\r\n    },\r\n    series: [\r\n        {\r\n            type: 'sunburst',\r\n            center: ['50%', '55%'],\r\n            radius: ['10%', '85%'],\r\n            nodeClick: 'rootToNode', \/\/ Mengaktifkan drill-down saat mengklik node\r\n            levels: [\r\n                {},\r\n                {\r\n                    \/\/ Cincin dalam (Kategori tingkat atas)\r\n                    r0: '15%',\r\n                    r: '40%',\r\n                    label: { rotate: 0, fontWeight: 'bold' },\r\n                    itemStyle: { borderWidth: 2 }\r\n                },\r\n                {\r\n                    \/\/ Cincin tengah (Sub-kategori)\r\n                    r0: '40%',\r\n                    r: '65%',\r\n                    label: { rotate: 'tangensial', fontSize: 11 }\r\n                },\r\n                {\r\n                    \/\/ Cincin luar (Produk daun)\r\n                    r0: '65%',\r\n                    r: '85%',\r\n                    label: { rotate: 'radial', fontSize: 10 }\r\n                }\r\n            ],\r\n            data: [\r\n                {\r\n                    name: 'Elektronik',\r\n                    children: [\r\n                        {\r\n                            name: 'Audio',\r\n                            children: [\r\n                                { name: 'Headphone', value: 40 },\r\n                                { name: 'Speaker', value: 25 }\r\n                            ]\r\n                        },\r\n                        {\r\n                            name: 'Komputer',\r\n                            children: [\r\n                                { name: 'Laptop', value: 80 },\r\n                                { name: 'Desktop', value: 35 }\r\n                            ]\r\n                        }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'Rumah & Kehidupan',\r\n                    children: [\r\n                        {\r\n                            name: 'Furniture',\r\n                            children: [\r\n                                { name: 'Kursi', value: 50 },\r\n                                { name: 'Meja', value: 30 }\r\n                            ]\r\n                        },\r\n                        {\r\n                            name: 'Hiasan',\r\n                            children: [\r\n                                { name: 'Pencahayaan', value: 45 },\r\n                                { name: 'Karpet', value: 20 }\r\n                            ]\r\n                        }\r\n                    ]\r\n                }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Penyesuaian Halus Tata Letak dan Penyelarasan Label<\/h2>\n
Mengendalikan mode rotasi label (radial<\/code> vs tangensial<\/code>) menjaga teks tetap mudah dibaca saat sektor menyempit menuju cincin luar.<\/p>\n
1. Pemisahan Sektor Kustom dan Label Radial<\/h3>\n
Terapkan batas item dan atur rotate: 'radial'<\/code>untuk menyelaraskan teks sepanjang radius sektor dengan rapi:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    series: [\r\n        {\r\n            type: 'sunburst',\r\n            radius: ['20%', '90%'],\r\n            itemStyle: {\r\n                borderRadius: 4,\r\n                borderColor: '#ffffff',\r\n                borderWidth: 2\r\n            },\r\n            label: {\r\n                show: true,\r\n                rotate: 'radial',\r\n                align: 'right'\r\n            },\r\n            data: [\r\n                {\r\n                    name: 'Perangkat Lunak',\r\n                    itemStyle: { color: '#5470c6' },\r\n                    children: [\r\n                        { name: 'SaaS', value: 120 },\r\n                        { name: 'On-Prem', value: 60 }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'Perangkat Keras',\r\n                    itemStyle: { color: '#91cc75' },\r\n                    children: [\r\n                        { name: 'Server', value: 90 },\r\n                        { name: 'Jaringan', value: 110 }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'Layanan',\r\n                    itemStyle: { color: '#fac858' },\r\n                    children: [\r\n                        { name: 'Konsultasi', value: 70 },\r\n                        { name: 'Dukungan', value: 50 }\r\n                    ]\r\n                }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Praktik Terbaik Strategis<\/h2>\n
    \n
  • Sesuaikan Rotasi Label dengan Kedalaman Cincin:<\/strong> Gunakan horizontal (rotate: 0<\/code>) atau label tangensial untuk cincin dalam yang lebar, dan beralih ke radial<\/code>label untuk sektor luar yang sempit.<\/li>\n
  • Aktifkan nodeClick: 'rootToNode'<\/code>:<\/strong>Zoom interaktif memungkinkan pengguna mengklik setiap busur induk untuk langsung fokus pada sub-pohonnya tanpa kekacauan visual.<\/li>\n
  • Gunakan Pewarisan Warna:<\/strong>Izinkan sektor anak untuk mewarisi nuansa dasar dari node induknya dengan perbedaan kecerahan\/kejenuhan untuk menjaga pengelompokan visual yang jelas di seluruh tingkatan.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Ketika menyajikan hierarki multi-tier di mana cincin bagian dalam mewakili kategori tingkat tinggi dan cincin luar memecah kategori bawah, makaDiagram Matahari menawarkan alternatif radial yang bersih dibandingkan peta pohon. Dengan mengatur kategori bersarang ke dalam cincin konsentris, diagram matahari memungkinkan…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":18,"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-2056","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Sunburst Chart Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code 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\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Sunburst Chart Guide | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-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_6a66c1f6396fc.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\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/\",\"name\":\"ECharts Sunburst 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\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1f6396fc.png\",\"datePublished\":\"2026-07-27T02:26:23+00:00\",\"description\":\"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1f6396fc.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1f6396fc.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-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 Matahari: Hierarki Radial dan Pemecahan Cincin Multi-Tingkat\"}]},{\"@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 Sunburst Chart Guide | VPasCode Text to Diagram Guide","description":"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code 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\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","og_locale":"id_ID","og_type":"article","og_title":"ECharts Sunburst Chart Guide | VPasCode Text to Diagram Guide","og_description":"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1f6396fc.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\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","name":"ECharts Sunburst 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\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1f6396fc.png","datePublished":"2026-07-27T02:26:23+00:00","description":"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1f6396fc.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1f6396fc.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-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 Matahari: Hierarki Radial dan Pemecahan Cincin Multi-Tingkat"}]},{"@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\/2056","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=2056"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}