{"id":2073,"date":"2026-07-24T09:27:56","date_gmt":"2026-07-24T09:27:56","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/stacked-column-chart-part-to-whole-composition-guide\/"},"modified":"2026-07-24T09:27:56","modified_gmt":"2026-07-24T09:27:56","slug":"stacked-column-chart-part-to-whole-composition-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/","title":{"rendered":"Diagram Kolom Tumpuk: Komposisi Bagian-ke-Seluruh"},"content":{"rendered":"

Ketika mengevaluasi pemecahan struktural di seluruh metrik diskret, Diagram Kolom Tumpuk<\/strong> menawarkan cara efisien untuk memvisualisasikan distribusi bagian-ke-seluruh. Berbeda dengan tata letak kelompok yang menyebar data secara horizontal, diagram tumpuk mengakumulasi nilai secara vertikal dalam batas kolom tunggal. Format ini membuatnya mudah untuk memantau pertumbuhan kategori total sambil melacak perubahan proporsi komponen internal yang berubah<\/em>, seperti lalu lintas perangkat yang dibagi berdasarkan sistem operasi atau rincian pengeluaran kuartalan di seluruh departemen.<\/p>\n

Mekanisme Kolom Tumpuk<\/h2>\n

Diagram kolom tumpuk bergantung pada penugasan identifikasi tumpuk<\/code>identifikasi di seluruh beberapa seri. Ketika mesin rendering mendeteksi nilai string tumpuk<\/code>yang sama pada seri dengan tipe: 'bar'<\/code>, maka akan menumpuk nilai numerik secara berurutan sepanjang sumbu Y vertikal, bukan menggambar kolom yang tumpang tindih atau berdampingan.<\/p>\n

1. Pengaturan Dasar<\/h3>\n

Untuk membuat diagram kolom tumpuk dasar, tentukan sumbu X berbasis kategori dan terapkan properti tumpuk<\/code>ke setiap seri dalam array seri<\/code>array:<\/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    legend: {\r\n        data: ['Langsung', 'Pencarian Organik', 'Iklan Berbayar', 'Rujukan']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Langsung',\r\n            type: 'bar',\r\n            stack: 'total',\r\n            data: [120, 132, 101, 134, 90, 230, 210]\r\n        },\r\n        {\r\n            name: 'Pencarian Organik',\r\n            type: 'bar',\r\n            stack: 'total',\r\n            data: [220, 182, 191, 234, 290, 330, 310]\r\n        },\r\n        {\r\n            name: 'Iklan Berbayar',\r\n            type: 'bar',\r\n            stack: 'total',\r\n            data: [150, 232, 201, 154, 190, 330, 410]\r\n        },\r\n        {\r\n            name: 'Rujukan',\r\n            type: 'bar',\r\n            stack: 'total',\r\n            data: [98, 77, 101, 99, 40, 120, 110]\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 kolom tumpuk dapat disesuaikan untuk menampilkan distribusi persentase atau pengelompokan sub-grup tertentu tergantung pada kebutuhan analitis Anda.<\/p>\n
1. Kolom Tumpuk yang Dinormalisasi 100%<\/h3>\n
Ketika tujuan utama Anda adalah membandingkan rasio proporsi daripada jumlah numerik absolut, ubah nilai data Anda menjadi persentase yang dinormalisasi yang berjumlah 100% per 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    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: ['Desktop', 'Mobile', 'Tablet']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'value',\r\n        min: 0,\r\n        max: 100,\r\n        axisLabel: { formatter: '{value}%' }\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Desktop',\r\n            type: 'bar',\r\n            stack: 'percentage',\r\n            data: [60, 50, 45, 40]\r\n        },\r\n        {\r\n            name: 'Mobile',\r\n            type: 'bar',\r\n            stack: 'percentage',\r\n            data: [30, 40, 45, 50]\r\n        },\r\n        {\r\n            name: 'Tablet',\r\n            type: 'bar',\r\n            stack: 'percentage',\r\n            data: [10, 10, 10, 10]\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. Pengelompokan Multi-Tumpuk<\/h3>\n
Anda dapat menggabungkan pengelompokan dan penumpukan dalam satu tampilan dengan menggunakan tumpuk<\/code>identifikasi yang berbeda di seluruh seri. Sebagai contoh, bandingkan total aktual vs. target, di mana masing-masing terdiri dari komponen bawah yang ditumpuk:<\/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    legend: {\r\n        data: ['Produk A Aktual', 'Produk B Aktual', 'Produk A Target', 'Produk B Target']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Produk A Aktual',\r\n            type: 'bar',\r\n            stack: 'aktual',\r\n            data: [120, 150, 180, 200]\r\n        },\r\n        {\r\n            name: 'Produk B Aktual',\r\n            type: 'bar',\r\n            stack: 'aktual',\r\n            data: [80, 90, 100, 110]\r\n        },\r\n        {\r\n            name: 'Produk A Target',\r\n            type: 'bar',\r\n            stack: 'target',\r\n            data: [130, 160, 190, 210]\r\n        },\r\n        {\r\n            name: 'Produk B Target',\r\n            type: 'bar',\r\n            stack: 'target',\r\n            data: [90, 100, 110, 120]\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 Layout dan Gaya<\/h2>\n
Kemulusan visual sangat penting untuk kolom yang ditumpuk agar segmen tetap dapat dibedakan tanpa menyebabkan kelelahan visual.<\/p>\n
1. Batas Segmen dan Ujung Atas yang Melengkung<\/h3>\n
Terapkan pemisah batas yang bersih di antara segmen yang ditumpuk dan batasi pembulatan sudut hanya pada segmen seri teratas dalam tumpukan:<\/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    xAxis: {\r\n        type: 'category',\r\n        data: ['Jan', 'Feb', 'Mar', 'Apr']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Lapisan Dasar',\r\n            type: 'bar',\r\n            stack: 'total',\r\n            data: [320, 302, 301, 334],\r\n            itemStyle: {\r\n                color: '#4992ff',\r\n                borderColor: '#ffffff',\r\n                borderWidth: 1\r\n            }\r\n        },\r\n        {\r\n            name: 'Lapisan Tengah',\r\n            type: 'bar',\r\n            stack: 'total',\r\n            data: [120, 132, 101, 134],\r\n            itemStyle: {\r\n                color: '#7cffb2',\r\n                borderColor: '#ffffff',\r\n                borderWidth: 1\r\n            }\r\n        },\r\n        {\r\n            name: 'Lapisan Atas',\r\n            type: 'bar',\r\n            stack: 'total',\r\n            data: [220, 182, 191, 234],\r\n            itemStyle: {\r\n                color: '#fddd60',\r\n                borderColor: '#ffffff',\r\n                borderWidth: 1,\r\n                borderRadius: [4, 4, 0, 0] \/\/ Sudut melengkung hanya pada segmen atas\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
  • Batasi Jumlah Segmen:<\/strong> Hindari menumpuk lebih dari 4 hingga 5 kategori per kolom. Di atas ambang batas ini, membandingkan segmen tengah di antar kolom menjadi secara visual sulit.<\/li>\n
  • Tetapkan Item Dasar di Bagian Bawah:<\/strong> Tempatkan metrik paling penting atau komponen bawah terbesar sebagai item pertama dalam series<\/code> array sehingga berada langsung di atas garis dasar untuk memudahkan penyesuaian.<\/li>\n
  • Gunakan Palet Kontras Tinggi atau Batas:<\/strong> Terapkan garis batas putih halus di antara segmen untuk menjaga perbedaan yang jelas ketika warna yang bersebelahan memiliki tingkat kontras yang serupa.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Ketika mengevaluasi pemecahan struktural di seluruh metrik diskret, Diagram Kolom Tumpuk menawarkan cara efisien untuk memvisualisasikan distribusi bagian-ke-seluruh. Berbeda dengan tata letak kelompok yang menyebar data secara horizontal, diagram tumpuk mengakumulasi nilai secara vertikal dalam batas kolom tunggal. Format ini…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":27,"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-2073","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Stacked Column Chart | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Visualize cumulative data series with ECharts stacked column charts in VPasCode, a free diagram-as-code tool for text to diagram mapping.\" \/>\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-column-chart-part-to-whole-composition-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Stacked Column Chart | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Visualize cumulative data series with ECharts stacked column charts in VPasCode, a free diagram-as-code tool for text to diagram mapping.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-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_6a63311b3b009.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\\\/stacked-column-chart-part-to-whole-composition-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-guide\\\/\",\"name\":\"ECharts Stacked Column 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-column-chart-part-to-whole-composition-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a63311b3b009.png\",\"datePublished\":\"2026-07-24T09:27:56+00:00\",\"description\":\"Visualize cumulative data series with ECharts stacked column charts in VPasCode, a free diagram-as-code tool for text to diagram mapping.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a63311b3b009.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a63311b3b009.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-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 Kolom Tumpuk: Komposisi Bagian-ke-Seluruh\"}]},{\"@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 Column Chart | VPasCode Text to Diagram Guide","description":"Visualize cumulative data series with ECharts stacked column charts in VPasCode, a free diagram-as-code tool for text to diagram mapping.","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-column-chart-part-to-whole-composition-guide\/","og_locale":"id_ID","og_type":"article","og_title":"ECharts Stacked Column Chart | VPasCode Text to Diagram Guide","og_description":"Visualize cumulative data series with ECharts stacked column charts in VPasCode, a free diagram-as-code tool for text to diagram mapping.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a63311b3b009.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\/stacked-column-chart-part-to-whole-composition-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/","name":"ECharts Stacked Column 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-column-chart-part-to-whole-composition-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a63311b3b009.png","datePublished":"2026-07-24T09:27:56+00:00","description":"Visualize cumulative data series with ECharts stacked column charts in VPasCode, a free diagram-as-code tool for text to diagram mapping.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a63311b3b009.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a63311b3b009.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-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 Kolom Tumpuk: Komposisi Bagian-ke-Seluruh"}]},{"@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\/2073","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=2073"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}