{"id":2072,"date":"2026-07-24T09:33:45","date_gmt":"2026-07-24T09:33:45","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/bar-chart-horizontal-layout-and-label-optimization-guide\/"},"modified":"2026-07-24T09:33:45","modified_gmt":"2026-07-24T09:33:45","slug":"bar-chart-horizontal-layout-and-label-optimization-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","title":{"rendered":"Diagram Batang: Tata Letak Horizontal dan Optimalisasi Label"},"content":{"rendered":"

Horizontal Diagram Batang<\/strong> sangat ideal untuk menampilkan data peringkat, nama kategori yang panjang, atau metrik kemajuan. Dengan memperpanjang batang sepanjang sumbu X, struktur visual ini memberi label kategori ruang horizontal yang cukup, menghilangkan kebutuhan untuk miringkan atau memotong teks. Baik Anda sedang membuat tabel peringkat 10 besar, analisis respons survei, atau perbandingan kinerja horizontal, diagram batang memberikan keterbacaan yang bersih di berbagai layar desktop maupun mobile.<\/p>\n

Mekanisme Batang Horizontal<\/h2>\n

Dalam Apache ECharts, diagram kolom dan diagram batang menggunakan jenis seri yang persis sama 'bar'<\/code> jenis seri. Transisi ke tata letak horizontal terjadi dengan menetapkan data kategori langsung ke sumbu vertikal (yAxis<\/code>) dan menentukan sumbu horizontal (xAxis<\/code>) sebagai sumbu nilai numerik. Mesin grafik memutar arah rendering, menggambar batang secara horizontal dari kiri ke kanan.<\/p>\n

1. Pengaturan Dasar<\/h3>\n

Untuk membuat diagram batang horizontal dasar, atur type: 'category'<\/code> pada yAxis<\/code> dan berikan array data Anda, sementara mengatur type: 'value'<\/code> pada xAxis<\/code>:<\/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: 'axis',\r\n        axisPointer: { type: 'shadow' }\r\n    },\r\n    xAxis: {\r\n        type: 'value'\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']\r\n    },\r\n    series: [\r\n        {\r\n            type: 'bar',\r\n            data: [214, 273, 331, 1380, 1411]\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 batang horizontal mendukung beberapa kelompok data, penyorotan terarah, dan penanganan sudut khusus untuk desain dashboard modern.<\/p>\n
1. Perbandingan Horizontal Multi-Seri<\/h3>\n
Tempatkan beberapa objek di dalam seri<\/code> array untuk membuat batang horizontal kelompok per label kategori:<\/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    legenda: {\r\n        data: ['Target 2025', 'Realisasi 2025']\r\n    },\r\n    sumbuX: {\r\n        jenis: 'nilai'\r\n    },\r\n    sumbuY: {\r\n        jenis: 'kategori',\r\n        data: ['Proyek A', 'Proyek B', 'Proyek C', 'Proyek D']\r\n    },\r\n    seri: [\r\n        {\r\n            nama: 'Target 2025',\r\n            jenis: 'batang',\r\n            data: [80, 95, 70, 85]\r\n        },\r\n        {\r\n            nama: 'Realisasi 2025',\r\n            jenis: 'batang',\r\n            data: [85, 90, 75, 92]\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
2. Ujung Bulat dan Gaya Penyorotan<\/h3>\n
Terapkan sudut kanan bulat menggunakan borderRadius<\/code> pada batang horizontal (menentukan [kanan-atas, kanan-bawah, kiri-bawah, kiri-atas]<\/code>):<\/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    sumbuX: {\r\n        jenis: 'nilai'\r\n    },\r\n    sumbuY: {\r\n        jenis: 'kategori',\r\n        data: ['Pencarian Langsung', 'Kampanye Email', 'Media Sosial', 'Pencarian Berbayar']\r\n    },\r\n    seri: [\r\n        {\r\n            jenis: 'batang',\r\n            data: [\r\n                120,\r\n                200,\r\n                {\r\n                    nilai: 450,\r\n                    gayaItem: {\r\n                        warna: '#fac858'\r\n                    }\r\n                },\r\n                280\r\n            ],\r\n            gayaItem: {\r\n                warna: '#91cc75',\r\n                borderRadius: [0, 6, 6, 0] \/\/ Bulatkan hanya ujung kanan\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 Tata Letak dan Jarak<\/h2>\n
Karena label kategori horizontal bervariasi panjang teksnya, menyesuaikan margin kiri dan penjajaran label mencegah pemotongan label.<\/p>\n
1. Margin Grid Kontainer<\/h3>\n
Gunakan grid<\/code>blok konfigurasi untuk mengalokasikan ruang cukup untuk label sumbu Y yang panjang:<\/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    grid: {\r\n        kiri: '15%',  \/\/ Tingkatkan margin kiri untuk teks kategori panjang\r\n        kanan: '8%',\r\n        bawah: '10%',\r\n        mengandungLabel: true\r\n    },\r\n    sumbuX: {\r\n        jenis: 'nilai'\r\n    },\r\n    sumbuY: {\r\n        jenis: 'kategori',\r\n        data: [\r\n            'Modernisasi Infrastruktur Perusahaan',\r\n            'Migrasi Cloud Tahap 2',\r\n            'Optimasi Basis Data',\r\n            'Desain Ulang Gateway API'\r\n        ]\r\n    },\r\n    seri: [\r\n        {\r\n            jenis: 'batang',\r\n            data: [75, 60, 90, 40],\r\n            lebarBatang: '50%'\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
  • Urutkan Data Secara Sengaja:<\/strong>Atur batang horizontal dalam urutan naik atau turun kapan pun memungkinkan. Daftar yang diurutkan membuat kinerja terbaik langsung jelas bagi pembaca.<\/li>\n
  • Gunakan containLabel: true<\/code>:<\/strong> Selalu sertakan containLabel: true<\/code> di dalam grid<\/code> konfigurasi untuk mencegah judul kategori panjang tumpah dari tepi kanvas.<\/li>\n
  • Label Nilai Langsung:<\/strong> Untuk papan peringkat yang bersih, pertimbangkan menampilkan nilai data langsung di ujung setiap batang menggunakan label: { show: true, position: 'right' }<\/code> dan menyembunyikan sumbu bawah numerik sepenuhnya.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Horizontal Diagram Batang sangat ideal untuk menampilkan data peringkat, nama kategori yang panjang, atau metrik kemajuan. Dengan memperpanjang batang sepanjang sumbu X, struktur visual ini memberi label kategori ruang horizontal yang cukup, menghilangkan kebutuhan untuk miringkan atau memotong teks. Baik…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":2,"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-2072","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Bar Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile 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\/bar-chart-horizontal-layout-and-label-optimization-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-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_6a6331aa83b81.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\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\",\"name\":\"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\",\"datePublished\":\"2026-07-24T09:33:45+00:00\",\"description\":\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-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 Batang: Tata Letak Horizontal dan Optimalisasi Label\"}]},{\"@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 Bar Chart Guide | VPasCode Text to Diagram Tool","description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile 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\/bar-chart-horizontal-layout-and-label-optimization-guide\/","og_locale":"id_ID","og_type":"article","og_title":"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool","og_description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.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\/bar-chart-horizontal-layout-and-label-optimization-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","name":"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png","datePublished":"2026-07-24T09:33:45+00:00","description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-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 Batang: Tata Letak Horizontal dan Optimalisasi Label"}]},{"@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\/2072","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=2072"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}