{"id":2066,"date":"2026-07-27T01:13:45","date_gmt":"2026-07-27T01:13:45","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng: Ph\u00e2n t\u00edch theo ph\u1ea7n-t\u1ed5ng theo chi\u1ec1u ngang"},"content":{"rendered":"

\u0110\u1ec3 ph\u00e2n t\u00edch c\u00e1c th\u00e0nh ph\u1ea7n ph\u00e2n t\u00edch tr\u00ean c\u00e1c m\u1ee5c c\u00f3 ti\u00eau \u0111\u1ec1 danh m\u1ee5c d\u00e0i, th\u00ec Bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng<\/strong> l\u00e0 l\u1ef1a ch\u1ecdn l\u00fd t\u01b0\u1edfng. B\u1eb1ng c\u00e1ch ch\u1ed3ng c\u00e1c \u0111o\u1ea1n d\u1eef li\u1ec7u theo chi\u1ec1u ngang t\u1eeb tr\u00e1i sang ph\u1ea3i d\u1ecdc theo tr\u1ee5c Y, bi\u1ec3u \u0111\u1ed3 n\u00e0y duy tr\u00ec \u0111\u1ed9 r\u00f5 r\u00e0ng c\u1ee7a nh\u00e3n d\u00e0i trong khi hi\u1ec3n th\u1ecb c\u1ea3 t\u1ed5ng th\u1ec3 danh m\u1ee5c v\u00e0 s\u1ef1 ph\u00e2n b\u1ed5 t\u1ef7 l\u1ec7 n\u1ed9i b\u1ed9<\/em>. N\u00f3 ho\u1ea1t \u0111\u1ed9ng r\u1ea5t t\u1ed1t v\u1edbi k\u1ebft qu\u1ea3 kh\u1ea3o s\u00e1t nh\u00e2n kh\u1ea9u h\u1ecdc, ph\u00e2n b\u1ed5 ngu\u1ed3n l\u1ef1c d\u1ef1 \u00e1n theo b\u1ed9 ph\u1eadn, ho\u1eb7c c\u00e1c \u0111\u01b0\u1eddng d\u1eabn chuy\u1ec3n \u0111\u1ed5i \u0111a k\u00eanh.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a c\u00e1c thanh ngang ch\u1ed3ng l\u00ean nhau<\/h2>\n

T\u1ea1o bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng ngang bao g\u1ed3m vi\u1ec7c s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh stack<\/code>t\u01b0\u01a1ng t\u1ef1 nh\u01b0 bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng, k\u1ebft h\u1ee3p v\u1edbi tr\u1ee5c Y d\u1ef1a tr\u00ean danh m\u1ee5c. Khi nhi\u1ec1u type: 'bar'<\/code>d\u00e3y d\u1eef li\u1ec7u chia s\u1ebb m\u1ed9t kh\u00f3a stack<\/code>gi\u1ed1ng nhau \u1edf \u0111\u1ecbnh h\u01b0\u1edbng ngang, b\u1ed9 x\u1eed l\u00fd hi\u1ec3n th\u1ecb s\u1ebd t\u00edch l\u0169y c\u00e1c gi\u00e1 tr\u1ecb t\u1eeb tr\u00e1i sang ph\u1ea3i d\u1ecdc theo tr\u1ee5c X.<\/p>\n

1. C\u00e0i \u0111\u1eb7t c\u01a1 b\u1ea3n<\/h3>\n

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng c\u01a1 b\u1ea3n, \u0111\u1eb7t yAxis<\/code> th\u00e0nh type: 'category'<\/code>, xAxis<\/code> th\u00e0nh type: 'value'<\/code>, v\u00e0 g\u00e1n m\u1ed9t chu\u1ed7i stack<\/code>ph\u00f9 h\u1ee3p cho m\u1ed7i d\u00e3y d\u1eef li\u1ec7u:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong 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: ['K\u1ef9 thu\u1eadt', 'S\u1ea3n ph\u1ea9m', 'Thi\u1ebft k\u1ebf', 'Ti\u1ebfp th\u1ecb']\r\n    },\r\n    xAxis: {\r\n        type: 'value'\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['D\u1ef1 \u00e1n Alpha', 'D\u1ef1 \u00e1n Beta', 'D\u1ef1 \u00e1n Gamma', 'D\u1ef1 \u00e1n Delta']\r\n    },\r\n    series: [\r\n        {\r\n            name: 'K\u1ef9 thu\u1eadt',\r\n            type: 'bar',\r\n            stack: 'allocation',\r\n            data: [320, 302, 301, 334]\r\n        },\r\n        {\r\n            name: 'S\u1ea3n ph\u1ea9m',\r\n            type: 'bar',\r\n            stack: 'allocation',\r\n            data: [120, 132, 101, 134]\r\n        },\r\n        {\r\n            name: 'Thi\u1ebft k\u1ebf',\r\n            type: 'bar',\r\n            stack: 'allocation',\r\n            data: [220, 182, 191, 234]\r\n        },\r\n        {\r\n            name: 'Ti\u1ebfp th\u1ecb',\r\n            type: 'bar',\r\n            stack: 'allocation',\r\n            data: [150, 212, 201, 154]\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c k\u1ef9 thu\u1eadt c\u1ea5u tr\u00fac n\u00e2ng cao<\/h2>\n
C\u00e1c thanh ngang ch\u1ed3ng l\u00ean nhau c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh \u0111\u1ec3 so s\u00e1nh th\u1ec3 t\u00edch tuy\u1ec7t \u0111\u1ed1i ho\u1eb7c \u0111\u01b0\u1ee3c chu\u1ea9n h\u00f3a \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m gi\u1eefa c\u00e1c danh m\u1ee5c.<\/p>\n
1. Bi\u1ec3u \u0111\u1ed3 thanh ngang chu\u1ea9n h\u00f3a 100%<\/h3>\n
\u0110\u1ec3 \u0111\u00e1nh gi\u00e1 t\u1ef7 l\u1ec7 t\u01b0\u01a1ng \u0111\u1ed1i thay v\u00ec s\u1ed1 l\u01b0\u1ee3ng tuy\u1ec7t \u0111\u1ed1i tr\u00ean c\u00e1c danh m\u1ee5c d\u00e0i, h\u00e3y chu\u1ea9n h\u00f3a d\u1eef li\u1ec7u chu\u1ed7i c\u1ee7a b\u1ea1n \u0111\u1ec3 t\u1ed5ng b\u1eb1ng 100% cho m\u1ed7i h\u00e0ng:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong 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: ['H\u00e0i l\u00f2ng', 'Trung l\u1eadp', 'B\u1ea5t m\u00e3n']\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            'Th\u00e0nh c\u00f4ng kh\u00e1ch h\u00e0ng doanh nghi\u1ec7p',\r\n            'D\u1ecbch v\u1ee5 h\u1ed7 tr\u1ee3 th\u1ecb tr\u01b0\u1eddng trung b\u00ecnh',\r\n            '\u0110\u0103ng k\u00fd t\u1ef1 ph\u1ee5c v\u1ee5'\r\n        ]\r\n    },\r\n    series: [\r\n        {\r\n            name: 'H\u00e0i l\u00f2ng',\r\n            type: 'bar',\r\n            stack: 'feedback',\r\n            data: [75, 60, 45]\r\n        },\r\n        {\r\n            name: 'Trung l\u1eadp',\r\n            type: 'bar',\r\n            stack: 'feedback',\r\n            data: [18, 25, 35]\r\n        },\r\n        {\r\n            name: 'B\u1ea5t m\u00e3n',\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                
\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Tinh ch\u1ec9nh b\u1ed1 c\u1ee5c v\u00e0 phong c\u00e1ch<\/h2>\n
C\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n th\u1ecb gi\u00e1c r\u00f5 r\u00e0ng v\u00e0 c\u00e1c \u0111\u1ea7u ngo\u00e0i bo tr\u00f2n mang l\u1ea1i cho c\u00e1c thanh ch\u1ed3ng ngang v\u1ebb ngo\u00e0i tinh t\u1ebf, hi\u1ec7n \u0111\u1ea1i.<\/p>\n
1. T\u00e1ch bi\u1ec7t c\u00e1c \u0111o\u1ea1n v\u00e0 bo tr\u00f2n \u0111\u1ea7u ngo\u00e0i<\/h3>\n
\u00c1p d\u1ee5ng c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n d\u1ecdc m\u1ecfng \u0111\u1ec3 ph\u00e2n bi\u1ec7t c\u00e1c \u0111o\u1ea1n b\u00ean trong, v\u00e0 gi\u1edbi h\u1ea1n phong c\u00e1ch bo g\u00f3c ch\u1ec9 cho \u0111o\u1ea1n cu\u1ed1i c\u00f9ng \u1edf b\u00ean ph\u1ea3i:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong 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        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: ['Ng\u00e2n s\u00e1ch Q1', 'Ng\u00e2n s\u00e1ch Q2', 'Ng\u00e2n s\u00e1ch Q3', 'Ng\u00e2n s\u00e1ch Q4']\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Chi ph\u00ed c\u1ed1 \u0111\u1ecbnh',\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: 'Chi ph\u00ed bi\u1ebfn \u0111\u1ed5i',\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: 'Chi ph\u00ed linh ho\u1ea1t',\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] \/\/ Bo tr\u00f2n c\u00e1c g\u00f3c \u1edf \u0111\u1ea7u b\u00ean ph\u1ea3i\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c th\u1ef1c h\u00e0nh t\u1ed1t chi\u1ebfn l\u01b0\u1ee3c<\/h2>\n
    \n
  • \u0110\u01b0\u1eddng chu\u1ea9n \u0111o\u1ea1n \u0111\u1ea7u ti\u00ean:<\/strong>\u0110o\u1ea1n g\u1ea7n \u0111\u01b0\u1eddng chu\u1ea9n tr\u1ee5c Y nh\u1ea5t l\u00e0 \u0111o\u1ea1n d\u1ec5 so s\u00e1nh nh\u1ea5t gi\u1eefa c\u00e1c danh m\u1ee5c. Lu\u00f4n \u0111\u1eb7t th\u00e0nh ph\u1ea7n quan tr\u1ecdng nh\u1ea5t c\u1ee7a b\u1ea1n v\u00e0o \u0111\u1ed1i t\u01b0\u1ee3ng chu\u1ed7i \u0111\u1ea7u ti\u00ean.<\/li>\n
  • H\u1ea1n ch\u1ebf c\u00e1c th\u00e0nh ph\u1ea7n ch\u1ed3ng l\u00ean nhau:<\/strong>Gi\u1eef t\u1ed5ng s\u1ed1 l\u01b0\u1ee3ng \u0111o\u1ea1n ch\u1ed3ng l\u00ean nhau \u1edf m\u1ee9c 5 ho\u1eb7c \u00edt h\u01a1n m\u1ed7i thanh \u0111\u1ec3 duy tr\u00ec ph\u00e2n t\u00edch th\u1ecb gi\u00e1c r\u00f5 r\u00e0ng m\u00e0 kh\u00f4ng l\u00e0m qu\u00e1 t\u1ea3i ng\u01b0\u1eddi xem.<\/li>\n
  • Nh\u00e3n v\u0103n b\u1ea3n trong thanh:<\/strong>\u0110\u1ed1i v\u1edbi c\u00e1c thanh ch\u1ed3ng ngang c\u00f3 c\u00e1c \u0111o\u1ea1n r\u1ed9ng, h\u00e3y c\u00e2n nh\u1eafc b\u1eadtlabel: { show: true, position: 'inside' }<\/code>\u0111\u1ec3 c\u00e1c gi\u00e1 tr\u1ecb \u0111o\u1ea1n ri\u00eang l\u1ebb c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ee5 thu\u1ed9c v\u00e0o c\u00f4ng c\u1ee5 g\u1ee3i \u00fd khi di chu\u1ed9t.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    \u0110\u1ec3 ph\u00e2n t\u00edch c\u00e1c th\u00e0nh ph\u1ea7n ph\u00e2n t\u00edch tr\u00ean c\u00e1c m\u1ee5c c\u00f3 ti\u00eau \u0111\u1ec1 danh m\u1ee5c d\u00e0i, th\u00ec Bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng l\u00e0 l\u1ef1a ch\u1ecdn l\u00fd t\u01b0\u1edfng. B\u1eb1ng c\u00e1ch ch\u1ed3ng c\u00e1c \u0111o\u1ea1n d\u1eef li\u1ec7u theo chi\u1ec1u ngang t\u1eeb tr\u00e1i sang…<\/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-2066","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts 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\/vn\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\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\/vn\/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=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/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\\\/vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng: Ph\u00e2n t\u00edch theo ph\u1ea7n-t\u1ed5ng theo chi\u1ec1u ngang\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/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\/vn\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/","og_locale":"vi_VN","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\/vn\/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":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/","url":"https:\/\/www.vpascode.com\/vn\/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\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/stacked-bar-chart-horizontal-part-to-whole-breakdown-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/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\/vn\/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\/vn\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/vn\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng: Ph\u00e2n t\u00edch theo ph\u1ea7n-t\u1ed5ng theo chi\u1ec1u ngang"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/vn\/#website","url":"https:\/\/www.vpascode.com\/vn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/vn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/2066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2066"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}