{"id":2069,"date":"2026-07-24T09:27:56","date_gmt":"2026-07-24T09:27:56","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng: C\u1ea5u th\u00e0nh to\u00e0n b\u1ed9 t\u1eeb c\u00e1c ph\u1ea7n"},"content":{"rendered":"

Khi \u0111\u00e1nh gi\u00e1 s\u1ef1 ph\u00e2n r\u00e3 c\u1ea5u tr\u00fac qua c\u00e1c ch\u1ec9 s\u1ed1 r\u1eddi r\u1ea1c, th\u00ecBi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng<\/strong> mang l\u1ea1i c\u00e1ch hi\u1ec7u qu\u1ea3 \u0111\u1ec3 tr\u1ef1c quan h\u00f3a ph\u00e2n b\u1ed1 t\u1eeb ph\u1ea7n \u0111\u1ebfn to\u00e0n b\u1ed9. Kh\u00e1c v\u1edbi b\u1ed1 c\u1ee5c nh\u00f3m l\u00e0m lan t\u1ecfa c\u00e1c chu\u1ed7i d\u1eef li\u1ec7u theo chi\u1ec1u ngang, bi\u1ec3u \u0111\u1ed3 ch\u1ed3ng t\u00edch l\u0169y c\u00e1c gi\u00e1 tr\u1ecb theo chi\u1ec1u d\u1ecdc trong m\u1ed9t bi\u00ean gi\u1edbi c\u1ed9t duy nh\u1ea5t. \u0110\u1ecbnh d\u1ea1ng n\u00e0y gi\u00fap theo d\u00f5i d\u1ec5 d\u00e0ngs\u1ef1 t\u0103ng tr\u01b0\u1edfng t\u1ed5ng th\u1ec3 c\u1ee7a danh m\u1ee5c \u0111\u1ed3ng th\u1eddi theo d\u00f5i s\u1ef1 thay \u0111\u1ed5i t\u1ef7 tr\u1ecdng c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n con b\u00ean trong<\/em>, ch\u1eb3ng h\u1ea1n nh\u01b0 l\u01b0u l\u01b0\u1ee3ng thi\u1ebft b\u1ecb chia theo h\u1ec7 \u0111i\u1ec1u h\u00e0nh ho\u1eb7c ph\u00e2n t\u00edch chi ph\u00ed theo qu\u00fd qua c\u00e1c ph\u00f2ng ban.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a c\u00e1c c\u1ed9t ch\u1ed3ng<\/h2>\n

Bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng d\u1ef1a v\u00e0o vi\u1ec7c g\u00e1n m\u1ed9tstack<\/code>ch\u1ec9 \u0111\u1ecbnh t\u01b0\u01a1ng \u1ee9ng tr\u00ean nhi\u1ec1u chu\u1ed7i. Khi b\u1ed9 x\u1eed l\u00fd hi\u1ec3n th\u1ecb ph\u00e1t hi\u1ec7n c\u00e1c gi\u00e1 tr\u1ecb chu\u1ed7istack<\/code>gi\u1ed1ng nhau tr\u00ean m\u1ed9t chu\u1ed7i c\u00f3type: 'bar'<\/code>, n\u00f3 s\u1ebd x\u1ebfp ch\u1ed3ng c\u00e1c gi\u00e1 tr\u1ecb s\u1ed1 h\u1ecdc theo th\u1ee9 t\u1ef1 d\u1ecdc theo tr\u1ee5c Y th\u1eb3ng \u0111\u1ee9ng thay v\u00ec hi\u1ec3n th\u1ecb c\u00e1c c\u1ed9t ch\u1ed3ng l\u00ean nhau ho\u1eb7c c\u1ea1nh nhau.<\/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, h\u00e3y x\u00e1c \u0111\u1ecbnh tr\u1ee5c X d\u1ef1a tr\u00ean danh m\u1ee5c v\u00e0 \u00e1p d\u1ee5ng thu\u1ed9c t\u00ednhstack<\/code>cho m\u1ed7i chu\u1ed7i trong m\u1ea3ngseries<\/code>m\u1ea3ng:<\/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: ['Tr\u1ef1c ti\u1ebfp', 'T\u00ecm ki\u1ebfm t\u1ef1 nhi\u00ean', 'Qu\u1ea3ng c\u00e1o tr\u1ea3 ph\u00ed', 'Tham kh\u1ea3o']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Th\u1ee9 Hai', 'Th\u1ee9 Ba', 'Th\u1ee9 T\u01b0', 'Th\u1ee9 N\u0103m', 'Th\u1ee9 S\u00e1u', 'Th\u1ee9 B\u1ea3y', 'Ch\u1ee7 Nh\u1eadt']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Tr\u1ef1c ti\u1ebfp',\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: 'T\u00ecm ki\u1ebfm t\u1ef1 nhi\u00ean',\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: 'Qu\u1ea3ng c\u00e1o tr\u1ea3 ph\u00ed',\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: 'Tham kh\u1ea3o',\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>
\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
Bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ec3 hi\u1ec3n th\u1ecb ph\u00e2n b\u1ed1 ph\u1ea7n tr\u0103m ho\u1eb7c nh\u00f3m con l\u1ef1a ch\u1ecdn t\u00f9y theo y\u00eau c\u1ea7u ph\u00e2n t\u00edch c\u1ee7a b\u1ea1n.<\/p>\n
1. C\u1ed9t ch\u1ed3ng \u0111\u01b0\u1ee3c chu\u1ea9n h\u00f3a 100%<\/h3>\n
Khi m\u1ee5c ti\u00eau ch\u00ednh c\u1ee7a b\u1ea1n l\u00e0 so s\u00e1nh t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m thay v\u00ec t\u1ed5ng s\u1ed1 tuy\u1ec7t \u0111\u1ed1i, h\u00e3y chuy\u1ec3n \u0111\u1ed5i c\u00e1c gi\u00e1 tr\u1ecb d\u1eef li\u1ec7u th\u00e0nh ph\u1ea7n tr\u0103m chu\u1ea9n h\u00f3a, t\u1ed5ng c\u1ed9ng 100% cho m\u1ed7i danh m\u1ee5c:<\/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: 'tr\u1ee5c',\r\n        axisPointer: { type: 'b\u00f3ng \u0111\u1ed5' },\r\n        formatter: '{b}\r\n{a0}: {c0}%\r\n{a1}: {c1}%\r\n{a2}: {c2}%'\r\n    },\r\n    legend: {\r\n        data: ['M\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n', 'Di \u0111\u1ed9ng', 'M\u00e1y t\u00ednh b\u1ea3ng']\r\n    },\r\n    xAxis: {\r\n        type: 'danh m\u1ee5c',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'gi\u00e1 tr\u1ecb',\r\n        min: 0,\r\n        max: 100,\r\n        axisLabel: { formatter: '{value}%' }\r\n    },\r\n    series: [\r\n        {\r\n            name: 'M\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n',\r\n            type: 'c\u1ed9t',\r\n            stack: 't\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m',\r\n            data: [60, 50, 45, 40]\r\n        },\r\n        {\r\n            name: 'Di \u0111\u1ed9ng',\r\n            type: 'c\u1ed9t',\r\n            stack: 't\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m',\r\n            data: [30, 40, 45, 50]\r\n        },\r\n        {\r\n            name: 'M\u00e1y t\u00ednh b\u1ea3ng',\r\n            type: 'c\u1ed9t',\r\n            stack: 't\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m',\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
2. Nh\u00f3m ch\u1ed3ng nhi\u1ec1u l\u1edbp<\/h3>\n
B\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p nh\u00f3m v\u00e0 ch\u1ed3ng trong m\u1ed9t b\u1ed1 c\u1ee5c duy nh\u1ea5t b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1cl\u1edbp ch\u1ed3ng<\/code>bi\u1ebfn th\u1ec3 kh\u00e1c nhau tr\u00ean c\u00e1c chu\u1ed7i. V\u00ed d\u1ee5, so s\u00e1nh t\u1ed5ng th\u1ef1c t\u1ebf v\u1edbi t\u1ed5ng m\u1ee5c ti\u00eau, trong \u0111\u00f3 m\u1ed7i t\u1ed5ng \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh t\u1eeb c\u00e1c th\u00e0nh ph\u1ea7n con \u0111\u01b0\u1ee3c ch\u1ed3ng l\u00ean nhau:<\/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    legend: {\r\n        data: ['S\u1ea3n ph\u1ea9m A Th\u1ef1c t\u1ebf', 'S\u1ea3n ph\u1ea9m B Th\u1ef1c t\u1ebf', 'S\u1ea3n ph\u1ea9m A M\u1ee5c ti\u00eau', 'S\u1ea3n ph\u1ea9m B M\u1ee5c ti\u00eau']\r\n    },\r\n    xAxis: {\r\n        type: 'danh m\u1ee5c',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'gi\u00e1 tr\u1ecb'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'S\u1ea3n ph\u1ea9m A Th\u1ef1c t\u1ebf',\r\n            type: 'c\u1ed9t',\r\n            stack: 'th\u1ef1c t\u1ebf',\r\n            data: [120, 150, 180, 200]\r\n        },\r\n        {\r\n            name: 'S\u1ea3n ph\u1ea9m B Th\u1ef1c t\u1ebf',\r\n            type: 'c\u1ed9t',\r\n            stack: 'th\u1ef1c t\u1ebf',\r\n            data: [80, 90, 100, 110]\r\n        },\r\n        {\r\n            name: 'S\u1ea3n ph\u1ea9m A M\u1ee5c ti\u00eau',\r\n            type: 'c\u1ed9t',\r\n            stack: 'm\u1ee5c ti\u00eau',\r\n            data: [130, 160, 190, 210]\r\n        },\r\n        {\r\n            name: 'S\u1ea3n ph\u1ea9m B M\u1ee5c ti\u00eau',\r\n            type: 'c\u1ed9t',\r\n            stack: 'm\u1ee5c ti\u00eau',\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>
\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
S\u1ef1 ho\u00e0n thi\u1ec7n v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c l\u00e0 r\u1ea5t quan tr\u1ecdng \u0111\u1ed1i v\u1edbi c\u00e1c c\u1ed9t ch\u1ed3ng \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o c\u00e1c \u0111o\u1ea1n v\u1eabn ph\u00e2n bi\u1ec7t \u0111\u01b0\u1ee3c r\u00f5 r\u00e0ng m\u00e0 kh\u00f4ng g\u00e2y m\u1ecfi m\u1eaft.<\/p>\n
1. Bi\u00ean gi\u1edbi \u0111o\u1ea1n v\u00e0 \u0111\u1ea7u \u0111\u1ec9nh bo tr\u00f2n<\/h3>\n
\u00c1p d\u1ee5ng c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n s\u1ea1ch gi\u1eefa c\u00e1c \u0111o\u1ea1n ch\u1ed3ng v\u00e0 gi\u1edbi h\u1ea1n vi\u1ec7c bo g\u00f3c ch\u1ec9 \u00e1p d\u1ee5ng cho \u0111o\u1ea1n \u0111\u1ea7u ti\u00ean \u1edf \u0111\u1ec9nh c\u1ee7a ch\u1ed3ng:<\/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    xAxis: {\r\n        type: 'danh m\u1ee5c',\r\n        data: ['Thg 1', 'Thg 2', 'Thg 3', 'Thg 4']\r\n    },\r\n    yAxis: {\r\n        type: 'gi\u00e1 tr\u1ecb'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'L\u1edbp n\u1ec1n',\r\n            type: 'c\u1ed9t',\r\n            stack: 't\u1ed5ng',\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: 'L\u1edbp gi\u1eefa',\r\n            type: 'c\u1ed9t',\r\n            stack: 't\u1ed5ng',\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: 'L\u1edbp tr\u00ean c\u00f9ng',\r\n            type: 'c\u1ed9t',\r\n            stack: 't\u1ed5ng',\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] \/\/ Bo g\u00f3c ch\u1ec9 \u1edf \u0111o\u1ea1n tr\u00ean c\u00f9ng\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
  • H\u1ea1n ch\u1ebf s\u1ed1 l\u01b0\u1ee3ng \u0111o\u1ea1n:<\/strong>Tr\u00e1nh ch\u1ed3ng h\u01a1n 4 \u0111\u1ebfn 5 danh m\u1ee5c tr\u00ean m\u1ed7i c\u1ed9t. V\u01b0\u1ee3t qu\u00e1 ng\u01b0\u1ee1ng n\u00e0y, vi\u1ec7c so s\u00e1nh c\u00e1c \u0111o\u1ea1n \u1edf gi\u1eefa gi\u1eefa c\u00e1c c\u1ed9t s\u1ebd tr\u1edf n\u00ean kh\u00f3 kh\u0103n v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c.<\/li>\n
  • C\u1ed1 \u0111\u1ecbnh c\u00e1c m\u1ee5c chu\u1ea9n \u1edf ph\u00eda d\u01b0\u1edbi:<\/strong>\u0110\u1eb7t ch\u1ec9 s\u1ed1 quan tr\u1ecdng nh\u1ea5t ho\u1eb7c th\u00e0nh ph\u1ea7n con l\u1edbn nh\u1ea5t l\u00e0m m\u1ee5c \u0111\u1ea7u ti\u00ean trong danh s\u00e1chseries<\/code>\u0111\u1ec3 n\u00f3 n\u1eb1m ngay tr\u00ean \u0111\u01b0\u1eddng chu\u1ea9n, gi\u00fap c\u0103n ch\u1ec9nh d\u1ec5 d\u00e0ng.<\/li>\n
  • S\u1eed d\u1ee5ng b\u1ea3ng m\u00e0u t\u01b0\u01a1ng ph\u1ea3n cao ho\u1eb7c vi\u1ec1n:<\/strong>\u00c1p d\u1ee5ng c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n tr\u1eafng m\u1edd gi\u1eefa c\u00e1c \u0111o\u1ea1n \u0111\u1ec3 duy tr\u00ec s\u1ef1 ph\u00e2n bi\u1ec7t r\u00f5 r\u00e0ng khi c\u00e1c m\u00e0u k\u1ec1 nhau c\u00f3 m\u1ee9c t\u01b0\u01a1ng ph\u1ea3n t\u01b0\u01a1ng t\u1ef1.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi \u0111\u00e1nh gi\u00e1 s\u1ef1 ph\u00e2n r\u00e3 c\u1ea5u tr\u00fac qua c\u00e1c ch\u1ec9 s\u1ed1 r\u1eddi r\u1ea1c, th\u00ecBi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng mang l\u1ea1i c\u00e1ch hi\u1ec7u qu\u1ea3 \u0111\u1ec3 tr\u1ef1c quan h\u00f3a ph\u00e2n b\u1ed1 t\u1eeb ph\u1ea7n \u0111\u1ebfn to\u00e0n b\u1ed9. Kh\u00e1c v\u1edbi b\u1ed1 c\u1ee5c nh\u00f3m l\u00e0m…<\/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-2069","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\/vn\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\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\/vn\/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=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 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-column-chart-part-to-whole-composition-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/docs\\\/vpascode-docs\\\/stacked-column-chart-part-to-whole-composition-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: C\u1ea5u th\u00e0nh to\u00e0n b\u1ed9 t\u1eeb c\u00e1c ph\u1ea7n\"}]},{\"@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 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\/vn\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/","og_locale":"vi_VN","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\/vn\/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":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/","url":"https:\/\/www.vpascode.com\/vn\/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\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/stacked-column-chart-part-to-whole-composition-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: C\u1ea5u th\u00e0nh to\u00e0n b\u1ed9 t\u1eeb c\u00e1c ph\u1ea7n"}]},{"@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\/2069","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=2069"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}