{"id":2070,"date":"2026-07-27T01:13:45","date_gmt":"2026-07-27T01:13:45","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/"},"modified":"2026-07-27T01:13:45","modified_gmt":"2026-07-27T01:13:45","slug":"stacked-bar-chart-horizontal-part-to-whole-breakdown-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/","title":{"rendered":"Diagram Batang Tumpuk: Pemecahan Bagian ke Seluruhnya Secara Horizontal"},"content":{"rendered":"<p>Untuk menganalisis pemecahan komponen di antara item dengan judul kategori yang panjang, <strong>Diagram Batang Tumpuk<\/strong> adalah pilihan ideal. Dengan menumpuk segmen data secara horizontal dari kiri ke kanan sepanjang sumbu Y, visualisasi ini mempertahankan kejelasan label panjang sambil menampilkan <em>baik total kategori keseluruhan maupun pemecahan proporsional internal<\/em>. Ini bekerja sangat baik untuk hasil demografi survei, alokasi sumber daya proyek berdasarkan departemen, atau saluran konversi multi-channel.<\/p>\n<h2>Mekanisme Batang Tumpuk Horizontal<\/h2>\n<p>Membuat diagram tumpuk horizontal melibatkan penggunaan <code>tumpuk<\/code> properti seperti diagram batang tumpuk, dipasangkan dengan sumbu Y berbasis kategori. Ketika beberapa <code>type: 'bar'<\/code> seri berbagi kunci <code>tumpuk<\/code> yang sama pada orientasi horizontal, mesin rendering mengakumulasi nilai dari kiri ke kanan sepanjang sumbu X.<\/p>\n<h3>1. Pengaturan Dasar<\/h3>\n<p>Untuk membuat diagram batang tumpuk dasar, atur <code>yAxis<\/code> menjadi <code>type: 'category'<\/code>, <code>xAxis<\/code> menjadi <code>type: 'value'<\/code>, dan berikan kunci yang sesuai <code>tumpuk<\/code> string ke setiap seri:<\/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:eNq1kj1rwzAQhvdC\/4M2LR4iuYHWpUNKSqdC9pBBtQ9FjSwZWWljgv97T\/6oo0ApgVSDuI9X0nN3spVX1pAncry9Ibi8tdqrKhv9LuaUlOAyQsVB1TSZMsFfWWV8yB6JbypAVb0Vhf2ipO2F7XBAgwRTRDcXwouMrOmLkcoAOGUkTQhdOVvscx\/MJdRKmmC9CbcDHxSb+N7DAili4J7jU+g90Fjc\/CbOhQdpXXNa3oiHPB+Qe7LQ1VYMgF3gGXzkv4qyjAJL0Kg4A66xUECI9fTSCU9YRpSBKWpLrBio34U7z9Re5LswK60tFoXTPVcMZaV8lpB0xsPGcEvvNpOuTf6C+xnS1cFYAGMpgrEAxi4EG7\/M1bl4x3UfuB6Qi1\/INX3gf2jZHNE4QzTetWweofUmRtrHbyQN6ag=\" 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:eNqtkj1rwzAQhvdC\/4M2LR5iuYHWJUNKoGuGbiHDNT4cYVkyktLGBP\/3Sv6oLUMpAWsQeu89nR6dpCrLlSQbcnt8IG5YpYTlVTroNqZ5nqNOCYUrNzQaHa\/3ikvr3RuxdYUuy5whU9+UNF1i028QmKPMgsoZWEjJgX5gIXlBI0L3WmWXdrVDA1y2MSzBgAZJj2HF69adH6J2BF8gLkjD5Pqv5BNYzJWupxcbwBxOjQXZiuoMPZ7Xb2in8h3Kcqp3KJw\/gzWoOTqAw3jKhMUPCaXnGZoRmj3sJ+i5YyycCv84QhVg+Nzur5KwVUSSFfNT7Kbk6TjmNdF\/UMO7LAsVe6g4cVCxh4rvhBq+yLJQrIV69lAvDord26nf37p0s9aOi8WOi7XNWgdc3dJFmtcfBzHeKg==\" \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: 'axis',\r\n        axisPointer: { type: 'shadow' }\r\n    },\r\n    legend: {\r\n        data: ['Teknik', 'Produk', 'Desain', 'Pemasaran']\r\n    },\r\n    xAxis: {\r\n        type: 'value'\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Proyek Alpha', 'Proyek Beta', 'Proyek Gamma', 'Proyek Delta']\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Teknik',\r\n            type: 'bar',\r\n            stack: 'alokasi',\r\n            data: [320, 302, 301, 334]\r\n        },\r\n        {\r\n            name: 'Produk',\r\n            type: 'bar',\r\n            stack: 'alokasi',\r\n            data: [120, 132, 101, 134]\r\n        },\r\n        {\r\n            name: 'Desain',\r\n            type: 'bar',\r\n            stack: 'alokasi',\r\n            data: [220, 182, 191, 234]\r\n        },\r\n        {\r\n            name: 'Pemasaran',\r\n            type: 'bar',\r\n            stack: 'alokasi',\r\n            data: [150, 212, 201, 154]\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:eNqtkj1rwzAQhvdC\/4M2LR5iuYHWJUNKoGuGbiHDNT4cYVkyktLGBP\/3Sv6oLUMpAWsQeu89nR6dpCrLlSQbcnt8IG5YpYTlVTroNqZ5nqNOCYUrNzQaHa\/3ikvr3RuxdYUuy5whU9+UNF1i028QmKPMgsoZWEjJgX5gIXlBI0L3WmWXdrVDA1y2MSzBgAZJj2HF69adH6J2BF8gLkjD5Pqv5BNYzJWupxcbwBxOjQXZiuoMPZ7Xb2in8h3Kcqp3KJw\/gzWoOTqAw3jKhMUPCaXnGZoRmj3sJ+i5YyycCv84QhVg+Nzur5KwVUSSFfNT7Kbk6TjmNdF\/UMO7LAsVe6g4cVCxh4rvhBq+yLJQrIV69lAvDord26nf37p0s9aOi8WOi7XNWgdc3dJFmtcfBzHeKg==\" \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:eNq1kj1rwzAQhvdC\/4M2LR4iuYHWpUNKSqdC9pBBtQ9FjSwZWWljgv97T\/6oo0ApgVSDuI9X0nN3spVX1pAncry9Ibi8tdqrKhv9LuaUlOAyQsVB1TSZMsFfWWV8yB6JbypAVb0Vhf2ipO2F7XBAgwRTRDcXwouMrOmLkcoAOGUkTQhdOVvscx\/MJdRKmmC9CbcDHxSb+N7DAili4J7jU+g90Fjc\/CbOhQdpXXNa3oiHPB+Qe7LQ1VYMgF3gGXzkv4qyjAJL0Kg4A66xUECI9fTSCU9YRpSBKWpLrBio34U7z9Re5LswK60tFoXTPVcMZaV8lpB0xsPGcEvvNpOuTf6C+xnS1cFYAGMpgrEAxi4EG7\/M1bl4x3UfuB6Qi1\/INX3gf2jZHNE4QzTetWweofUmRtrHbyQN6ag=\" 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=\"sQHyoCX\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-1291\" decoding=\"async\" fetchpriority=\"high\" height=\"1363\" sizes=\"(max-width: 1377px) 100vw, 1377px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe.png 1377w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe-300x297.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe-1024x1014.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe-768x760.png 768w\" width=\"1377\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Teknik Struktural Lanjutan<\/h2>\n<p>Batang horizontal yang ditumpuk dapat dikonfigurasi untuk perbandingan volume absolut atau dinormalisasi untuk menampilkan rasio persentase di antara kategori.<\/p>\n<h3>1. Grafik Batang Horizontal yang Dinormalisasi 100%<\/h3>\n<p>Untuk mengevaluasi rasio relatif daripada jumlah absolut di antara kategori panjang, normalisasi data seri Anda agar berjumlah 100% per baris:<\/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:eNqtUj1PwzAQ3Sv1P9xSeUmlpFBAQQwI2CggdUQMl+QSrCZxZLulVZT\/jp1+JA4wINVL7u69nN87n6g0FyXcQT0egTlaiFzzKjzmbU3yLCMZAsMtV8zrEJu\/CV5qi9agdxUZlvrERHwxaHrMVMgCdctjddSMRzX6jfkn9puJTYI2CfbJrE1mzYTtGxwb5ZRRmTjaEtQYwjtbouYq5ZQwD9gLrbXE3IaPXKkT9OG2294b+a7TvYEN5mvq+yx4GYLfL+A2hMD3B7N4xohyOwnHbtvOmIHGvX\/31\/0xasqE3PUlHIx2BXvYkx19JbkieFgrLQqSsFzHMSnnnVrugifTBcoVaUOpKiHNl+SGG\/IP7pLydGpRgtcyEigTXmasIw0mqUhyUo682u1YYmGd9Z7JxQ\/OI5RDRGmMVwZKiZLIhEP8MJjruQdXvgeX848O72\/g74JOq3JmOcGNBzMj6eJ\/cpx1PfuIPAiMpJnfl7QPTaW5\/Qa1bfYL\" 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:eNqtUrFOwzAQ3Sv1H26pvGRIAgUUxIAEEy1kYEMdLs01tZrakeNAoyj\/jp20ahxgQKoH697d8\/m9s2WhuRTwAM10AmZpKXPNi+iEu5ziWUYqAoYHXjLvXLE4llxoW21A1wUZVrnFVH4xaAfMjVR71B2PNUk7nTTot+bM2m9nFgQdCHoQdiBsZ6xvcGqUU0YidbSlqDGCDxZXaJQBeyWtMLfRO09xB11+5bY5PBrZrsNe+CfmFQ397bmIwB8m8BBB4PujGSwwodxOwLHZtTMmoHXvr\/+6f42aMqnqoYSjwXPCLvZCCaktljxHATGZPctM9GxfolC8dFx0JxZYozCUp2pXCcuNsUQFSxJk4PYH\/00kElXKRQZLFClXnJ0Zo4GWpDiVjsrGbSdwbw32r+SWjt4TVONKqXG9M6UNUZqYcFw\/juZ27sGN78H1fHWuD\/\/e71pOP+XCaoI7D0Kj6Op\/aga\/9eLz8SAwgkJ\/KKgPTaa9\/wY74PEx\" \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: 'axis',\r\n        axisPointer: { type: 'shadow' },\r\n        formatter: '{b}\r\n{a0}: {c0}%\r\n{a1}: {c1}%\r\n{a2}: {c2}%'\r\n    },\r\n    legend: {\r\n        data: ['Puas', 'Netral', 'Tidak Puas']\r\n    },\r\n    xAxis: {\r\n        type: 'value',\r\n        min: 0,\r\n        max: 100,\r\n        axisLabel: { formatter: '{value}%' }\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: [\r\n            'Keberhasilan Pelanggan Enterprise',\r\n            'Layanan Dukungan Pasar Menengah',\r\n            'Onboarding Mandiri'\r\n        ]\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Puas',\r\n            type: 'bar',\r\n            stack: 'feedback',\r\n            data: [75, 60, 45]\r\n        },\r\n        {\r\n            name: 'Netral',\r\n            type: 'bar',\r\n            stack: 'feedback',\r\n            data: [18, 25, 35]\r\n        },\r\n        {\r\n            name: 'Tidak Puas',\r\n            type: 'bar',\r\n            stack: 'feedback',\r\n            data: [7, 15, 20]\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:eNqtUrFOwzAQ3Sv1H26pvGRIAgUUxIAEEy1kYEMdLs01tZrakeNAoyj\/jp20ahxgQKoH697d8\/m9s2WhuRTwAM10AmZpKXPNi+iEu5ziWUYqAoYHXjLvXLE4llxoW21A1wUZVrnFVH4xaAfMjVR71B2PNUk7nTTot+bM2m9nFgQdCHoQdiBsZ6xvcGqUU0YidbSlqDGCDxZXaJQBeyWtMLfRO09xB11+5bY5PBrZrsNe+CfmFQ397bmIwB8m8BBB4PujGSwwodxOwLHZtTMmoHXvr\/+6f42aMqnqoYSjwXPCLvZCCaktljxHATGZPctM9GxfolC8dFx0JxZYozCUp2pXCcuNsUQFSxJk4PYH\/00kElXKRQZLFClXnJ0Zo4GWpDiVjsrGbSdwbw32r+SWjt4TVONKqXG9M6UNUZqYcFw\/juZ27sGN78H1fHWuD\/\/e71pOP+XCaoI7D0Kj6Op\/aga\/9eLz8SAwgkJ\/KKgPTaa9\/wY74PEx\" \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:eNqtUj1PwzAQ3Sv1P9xSeUmlpFBAQQwI2CggdUQMl+QSrCZxZLulVZT\/jp1+JA4wINVL7u69nN87n6g0FyXcQT0egTlaiFzzKjzmbU3yLCMZAsMtV8zrEJu\/CV5qi9agdxUZlvrERHwxaHrMVMgCdctjddSMRzX6jfkn9puJTYI2CfbJrE1mzYTtGxwb5ZRRmTjaEtQYwjtbouYq5ZQwD9gLrbXE3IaPXKkT9OG2294b+a7TvYEN5mvq+yx4GYLfL+A2hMD3B7N4xohyOwnHbtvOmIHGvX\/31\/0xasqE3PUlHIx2BXvYkx19JbkieFgrLQqSsFzHMSnnnVrugifTBcoVaUOpKiHNl+SGG\/IP7pLydGpRgtcyEigTXmasIw0mqUhyUo682u1YYmGd9Z7JxQ\/OI5RDRGmMVwZKiZLIhEP8MJjruQdXvgeX848O72\/g74JOq3JmOcGNBzMj6eJ\/cpx1PfuIPAiMpJnfl7QPTaW5\/Qa1bfYL\" 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=\"vRYIsAC\"><img alt=\"\" class=\"alignnone size-full wp-image-1292\" decoding=\"async\" height=\"1363\" sizes=\"(max-width: 1412px) 100vw, 1412px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b12c08f4d.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b12c08f4d.png 1412w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b12c08f4d-300x290.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b12c08f4d-1024x988.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b12c08f4d-768x741.png 768w\" width=\"1412\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Penyesuaian Halus Tata Letak dan Gaya<\/h2>\n<p>Batas visual yang bersih dan ujung luar yang melengkung memberikan tampilan yang halus dan modern pada batang tumpuk horizontal.<\/p>\n<h3>1. Pemisahan Segmen dan Pembulatan Ujung Luar<\/h3>\n<p>Terapkan garis batas vertikal tipis untuk membedakan segmen dalam, dan batasi gaya radius sudut hanya pada segmen terakhir di sisi kanan:<\/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:eNrNVMFqg0AQvRf6DwuleBHiGm0SSw9tSk+9JIX2EHJYdydmqXHDupZI8d+7ExOighRCCh1kcHYeM8+3zqitkSojD+T7+opYS7QU0TFAS2FlIuLQ8NZxT6daJuv9sdc65iozTGavLIY0IkYXUOeqA2b3uJN5q7wpt2DrfLG0AKcNLvvAnBlIlC6bnQUzLCILZ0bJUyESMI5LnJnfDIbNIDgGy3bTHLQE23VxKt0ggJaxDZJ4kTsQZKpykzd5NGjGTHczuWH8E1MHIu3s4RsCz3NJ4KOj6IbesgOUBjZvpkwh6pKrLyFV2ja5CYORx++6XdBipQXo6RG42ls\/8EMKs44IbeerU1i5v8n1zrRkcQp\/opiPivkhOpTNH5+r2IRyPgr\/h2LPMucacDpZ+1e\/gGAUBaMoGB2im5wr2IrxcTi+oGC9gDkTssDBtHzv9o+3JIMBmasiE3YSudIZ6JzYZWbWUC8oAplNsG3\/LdSvdgdU9z+n+h8F\" 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:eNrNVMtqwzAQvBf6D4JSfAnEcuw8XHpI22MvbUp7CDlsJEVR48hGlktM8b\/XmzTEMhhKyKGLWbTaQTMePdLMqlSTe\/J9fUXqkEbx+FhgJGJlY+LR6NbrnWaNkuv9tO9Ms1RbUPoZliKJiTWFOPSqX8xuulO5s7wtM1Gv8wVJITwXXHaBGVghU1M2mTlYiMncm2opwYAmL9TrkUYZuOXALUNv4ZLnwihRs89PFA0hGBq2KOZBQQnkTVjImnoacpdg2p3cAttgq+BS2Hb3919C3++RMMBEMQ38RQuorNjObJmIuC3usBlJamqSmygc+WzYZsFYpoYL83gErvbRDfxQ3K5jQt1+dSqr3t\/segej8Ixc2LEAHQsiTGhbMD7XsQllbBT9D8eeVM6MwFsK7pG\/gGEUDaNoGB1gmpxr2ArYOBpf0LBOwCtwVeDFrPUO95+\/IP0+mRW8sGQrEqHlptCSZMCBFJ843IAG3b0Fh2H9AFR3PwO1IS0=\" \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    grid: {\r\n        left: '15%',\r\n        right: '10%',\r\n        containLabel: true\r\n    },\r\n    xAxis: {\r\n        type: 'value'\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Anggaran Q1', 'Anggaran Q2', 'Anggaran Q3', 'Anggaran Q4']\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Biaya Tetap',\r\n            type: 'bar',\r\n            stack: 'budget',\r\n            data: [400, 420, 410, 430],\r\n            itemStyle: {\r\n                color: '#5470c6',\r\n                borderColor: '#ffffff',\r\n                borderWidth: 1\r\n            }\r\n        },\r\n        {\r\n            name: 'Biaya Variabel',\r\n            type: 'bar',\r\n            stack: 'budget',\r\n            data: [200, 250, 220, 280],\r\n            itemStyle: {\r\n                color: '#91cc75',\r\n                borderColor: '#ffffff',\r\n                borderWidth: 1\r\n            }\r\n        },\r\n        {\r\n            name: 'Discretionary',\r\n            type: 'bar',\r\n            stack: 'budget',\r\n            data: [100, 150, 130, 190],\r\n            itemStyle: {\r\n                color: '#fac858',\r\n                borderColor: '#ffffff',\r\n                borderWidth: 1,\r\n                borderRadius: [0, 6, 6, 0] \/\/ Sudut melengkung pada ujung kanan\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:eNrNVMtqwzAQvBf6D4JSfAnEcuw8XHpI22MvbUp7CDlsJEVR48hGlktM8b\/XmzTEMhhKyKGLWbTaQTMePdLMqlSTe\/J9fUXqkEbx+FhgJGJlY+LR6NbrnWaNkuv9tO9Ms1RbUPoZliKJiTWFOPSqX8xuulO5s7wtM1Gv8wVJITwXXHaBGVghU1M2mTlYiMncm2opwYAmL9TrkUYZuOXALUNv4ZLnwihRs89PFA0hGBq2KOZBQQnkTVjImnoacpdg2p3cAttgq+BS2Hb3919C3++RMMBEMQ38RQuorNjObJmIuC3usBlJamqSmygc+WzYZsFYpoYL83gErvbRDfxQ3K5jQt1+dSqr3t\/segej8Ixc2LEAHQsiTGhbMD7XsQllbBT9D8eeVM6MwFsK7pG\/gGEUDaNoGB1gmpxr2ArYOBpf0LBOwCtwVeDFrPUO95+\/IP0+mRW8sGQrEqHlptCSZMCBFJ843IAG3b0Fh2H9AFR3PwO1IS0=\" \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:eNrNVMFqg0AQvRf6DwuleBHiGm0SSw9tSk+9JIX2EHJYdydmqXHDupZI8d+7ExOighRCCh1kcHYeM8+3zqitkSojD+T7+opYS7QU0TFAS2FlIuLQ8NZxT6daJuv9sdc65iozTGavLIY0IkYXUOeqA2b3uJN5q7wpt2DrfLG0AKcNLvvAnBlIlC6bnQUzLCILZ0bJUyESMI5LnJnfDIbNIDgGy3bTHLQE23VxKt0ggJaxDZJ4kTsQZKpykzd5NGjGTHczuWH8E1MHIu3s4RsCz3NJ4KOj6IbesgOUBjZvpkwh6pKrLyFV2ja5CYORx++6XdBipQXo6RG42ls\/8EMKs44IbeerU1i5v8n1zrRkcQp\/opiPivkhOpTNH5+r2IRyPgr\/h2LPMucacDpZ+1e\/gGAUBaMoGB2im5wr2IrxcTi+oGC9gDkTssDBtHzv9o+3JIMBmasiE3YSudIZ6JzYZWbWUC8oAplNsG3\/LdSvdgdU9z+n+h8F\" 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=\"xgcMIVQ\"><img alt=\"\" class=\"alignnone size-full wp-image-1293\" decoding=\"async\" height=\"1243\" sizes=\"(max-width: 1195px) 100vw, 1195px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b13bdc4f2.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b13bdc4f2.png 1195w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b13bdc4f2-288x300.png 288w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b13bdc4f2-984x1024.png 984w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b13bdc4f2-768x799.png 768w\" width=\"1195\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Praktik Terbaik Strategis<\/h2>\n<ul>\n<li><strong>Basis Segmen Pertama:<\/strong>Segmen yang paling dekat dengan basis sumbu Y adalah yang paling mudah dibandingkan di antara kategori. Selalu letakkan komponen paling penting sebagai objek seri pertama.<\/li>\n<li><strong>Batasi Komponen Tumpuk:<\/strong>Pertahankan jumlah total segmen tumpuk menjadi 5 atau kurang per batang untuk menjaga analisis visual yang jelas tanpa membebani pemirsa.<\/li>\n<li><strong>Label Teks Dalam Batang:<\/strong> Untuk batang tumpuk horizontal dengan segmen lebar, pertimbangkan untuk mengaktifkan <code>label: { show: true, position: 'inside' }<\/code>untuk membuat nilai segmen individu mudah dibaca tanpa bergantung pada tooltip saat diarahkan.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Untuk menganalisis pemecahan komponen di antara item dengan judul kategori yang panjang, Diagram Batang Tumpuk adalah pilihan ideal. Dengan menumpuk segmen data secara horizontal dari kiri ke kanan sepanjang sumbu Y, visualisasi ini mempertahankan kejelasan label panjang sambil menampilkan baik&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":4,"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-2070","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 Stacked Bar Chart | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Script stacked horizontal bar visuals from raw data with ECharts in VPasCode, a 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\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Stacked Bar Chart | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Script stacked horizontal bar visuals from raw data with ECharts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-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_6a66b11b508fe.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\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/\",\"name\":\"ECharts Stacked Bar Chart | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b11b508fe.png\",\"datePublished\":\"2026-07-27T01:13:45+00:00\",\"description\":\"Script stacked horizontal bar visuals from raw data with ECharts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b11b508fe.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b11b508fe.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-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 Tumpuk: Pemecahan Bagian ke Seluruhnya Secara Horizontal\"}]},{\"@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 Stacked Bar Chart | VPasCode Text to Diagram Guide","description":"Script stacked horizontal bar visuals from raw data with ECharts in VPasCode, a 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\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/","og_locale":"id_ID","og_type":"article","og_title":"ECharts Stacked Bar Chart | VPasCode Text to Diagram Guide","og_description":"Script stacked horizontal bar visuals from raw data with ECharts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe.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\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/","name":"ECharts Stacked Bar Chart | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe.png","datePublished":"2026-07-27T01:13:45+00:00","description":"Script stacked horizontal bar visuals from raw data with ECharts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b11b508fe.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-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 Tumpuk: Pemecahan Bagian ke Seluruhnya Secara Horizontal"}]},{"@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\/2070","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=2070"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}