{"id":2068,"date":"2026-07-24T09:33:45","date_gmt":"2026-07-24T09:33:45","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/bar-chart-horizontal-layout-and-label-optimization-guide\/"},"modified":"2026-07-24T09:33:45","modified_gmt":"2026-07-24T09:33:45","slug":"bar-chart-horizontal-layout-and-label-optimization-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t: B\u1ed1 c\u1ee5c ngang v\u00e0 t\u1ed1i \u01b0u h\u00f3a nh\u00e3n"},"content":{"rendered":"

Ngang Bi\u1ec3u \u0111\u1ed3 c\u1ed9t<\/strong>r\u1ea5t l\u00fd t\u01b0\u1edfng \u0111\u1ec3 hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u x\u1ebfp h\u1ea1ng, t\u00ean danh m\u1ee5c d\u00e0i d\u00f2ng ho\u1eb7c c\u00e1c ch\u1ec9 s\u1ed1 ti\u1ebfn \u0111\u1ed9. B\u1eb1ng c\u00e1ch k\u00e9o d\u00e0i c\u00e1c c\u1ed9t d\u1ecdc theo tr\u1ee5c X, c\u1ea5u tr\u00fac tr\u1ef1c quan n\u00e0y cung c\u1ea5p \u0111\u1ee7 kh\u00f4ng gian ngang cho nh\u00e3n danh m\u1ee5c, lo\u1ea1i b\u1ecf nhu c\u1ea7u nghi\u00eang ho\u1eb7c c\u1eaft ng\u1eafn v\u0103n b\u1ea3n. D\u00f9 b\u1ea1n \u0111ang x\u00e2y d\u1ef1ng b\u1ea3ng x\u1ebfp h\u1ea1ng top-10, ph\u00e2n t\u00edch ph\u1ea3n h\u1ed3i kh\u1ea3o s\u00e1t hay so s\u00e1nh hi\u1ec7u su\u1ea5t theo chi\u1ec1u ngang, bi\u1ec3u \u0111\u1ed3 c\u1ed9t \u0111\u1ec1u mang l\u1ea1i kh\u1ea3 n\u0103ng \u0111\u1ecdc r\u00f5 r\u00e0ng tr\u00ean c\u1ea3 m\u00e0n h\u00ecnh m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n v\u00e0 di \u0111\u1ed9ng.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a c\u00e1c thanh ngang<\/h2>\n

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 c\u1ed9t v\u00e0 bi\u1ec3u \u0111\u1ed3 c\u1ed9t s\u1eed d\u1ee5ng ki\u1ec3u chu\u1ed7i gi\u1ed1ng h\u1ec7t nhau 'bar'<\/code> ki\u1ec3u chu\u1ed7i. Vi\u1ec7c chuy\u1ec3n sang b\u1ed1 c\u1ee5c ngang x\u1ea3y ra b\u1eb1ng c\u00e1ch g\u00e1n d\u1eef li\u1ec7u danh m\u1ee5c tr\u1ef1c ti\u1ebfp v\u00e0o tr\u1ee5c \u0111\u1ee9ng (yAxis<\/code>) v\u00e0 x\u00e1c \u0111\u1ecbnh tr\u1ee5c ngang (xAxis<\/code>) l\u00e0 tr\u1ee5c gi\u00e1 tr\u1ecb s\u1ed1. B\u1ed9 \u0111\u1ed9ng l\u1ef1c bi\u1ec3u \u0111\u1ed3 s\u1ebd xoay h\u01b0\u1edbng hi\u1ec3n th\u1ecb, v\u1ebd c\u00e1c thanh theo chi\u1ec1u ngang t\u1eeb tr\u00e1i sang ph\u1ea3i.<\/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 ngang c\u01a1 b\u1ea3n, h\u00e3y \u0111\u1eb7t type: 'category'<\/code> tr\u00ean yAxis<\/code> v\u00e0 cung c\u1ea5p m\u1ea3ng d\u1eef li\u1ec7u c\u1ee7a b\u1ea1n, trong khi \u0111\u1eb7t type: 'value'<\/code> tr\u00ean xAxis<\/code>:<\/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    xAxis: {\r\n        type: 'value'\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']\r\n    },\r\n    series: [\r\n        {\r\n            type: 'bar',\r\n            data: [214, 273, 331, 1380, 1411]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\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 ngang h\u1ed7 tr\u1ee3 nhi\u1ec1u nh\u00f3m d\u1eef li\u1ec7u, l\u00e0m n\u1ed5i b\u1eadt m\u1ee5c ti\u00eau v\u00e0 x\u1eed l\u00fd g\u00f3c t\u00f9y ch\u1ec9nh cho c\u00e1c thi\u1ebft k\u1ebf b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n hi\u1ec7n \u0111\u1ea1i.<\/p>\n
1. So s\u00e1nh ngang \u0111a chu\u1ed7i<\/h3>\n
\u0110\u1eb7t nhi\u1ec1u \u0111\u1ed1i t\u01b0\u1ee3ng trong chu\u1ed7i<\/code> m\u1ea3ng \u0111\u1ec3 t\u1ea1o c\u00e1c thanh ngang nh\u00f3m theo nh\u00e3n 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    ch\u00fa th\u00edch: {\r\n        d\u1eef li\u1ec7u: ['M\u1ee5c ti\u00eau 2025', 'Th\u1ef1c t\u1ebf 2025']\r\n    },\r\n    tr\u1ee5cX: {\r\n        lo\u1ea1i: 'gi\u00e1 tr\u1ecb'\r\n    },\r\n    tr\u1ee5cY: {\r\n        lo\u1ea1i: 'danh m\u1ee5c',\r\n        d\u1eef li\u1ec7u: ['D\u1ef1 \u00e1n A', 'D\u1ef1 \u00e1n B', 'D\u1ef1 \u00e1n C', 'D\u1ef1 \u00e1n D']\r\n    },\r\n    chu\u1ed7i: [\r\n        {\r\n            t\u00ean: 'M\u1ee5c ti\u00eau 2025',\r\n            lo\u1ea1i: 'thanh',\r\n            d\u1eef li\u1ec7u: [80, 95, 70, 85]\r\n        },\r\n        {\r\n            t\u00ean: 'Th\u1ef1c t\u1ebf 2025',\r\n            lo\u1ea1i: 'thanh',\r\n            d\u1eef li\u1ec7u: [85, 90, 75, 92]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
2. Vi\u1ec1n tr\u00f2n \u1edf hai \u0111\u1ea7u v\u00e0 \u0111\u1ecbnh d\u1ea1ng n\u1ed5i b\u1eadt<\/h3>\n
\u00c1p d\u1ee5ng vi\u1ec1n tr\u00f2n \u1edf g\u00f3c ph\u1ea3i b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ngborderRadius<\/code> tr\u00ean c\u00e1c thanh ngang (x\u00e1c \u0111\u1ecbnh[g\u00f3c tr\u00ean ph\u1ea3i, g\u00f3c d\u01b0\u1edbi ph\u1ea3i, g\u00f3c d\u01b0\u1edbi tr\u00e1i, g\u00f3c tr\u00ean tr\u00e1i]<\/code>):<\/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    tr\u1ee5cX: {\r\n        lo\u1ea1i: 'gi\u00e1 tr\u1ecb'\r\n    },\r\n    tr\u1ee5cY: {\r\n        lo\u1ea1i: 'danh m\u1ee5c',\r\n        d\u1eef li\u1ec7u: ['T\u00ecm ki\u1ebfm tr\u1ef1c ti\u1ebfp', 'Chi\u1ebfn d\u1ecbch Email', 'M\u1ea1ng x\u00e3 h\u1ed9i', 'T\u00ecm ki\u1ebfm tr\u1ea3 ph\u00ed']\r\n    },\r\n    chu\u1ed7i: [\r\n        {\r\n            lo\u1ea1i: 'thanh',\r\n            d\u1eef li\u1ec7u: [\r\n                120,\r\n                200,\r\n                {\r\n                    gi\u00e1 tr\u1ecb: 450,\r\n                    ki\u1ec3u m\u1ee5c: {\r\n                        m\u00e0u: '#fac858'\r\n                    }\r\n                },\r\n                280\r\n            ],\r\n            ki\u1ec3u m\u1ee5c: {\r\n                m\u00e0u: '#91cc75',\r\n                borderRadius: [0, 6, 6, 0] \/\/ Ch\u1ec9 l\u00e0m tr\u00f2n c\u00e1c \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
Tinh ch\u1ec9nh b\u1ed1 c\u1ee5c v\u00e0 kho\u1ea3ng c\u00e1ch<\/h2>\n
V\u00ec c\u00e1c nh\u00e3n danh m\u1ee5c ngang c\u00f3 \u0111\u1ed9 d\u00e0i v\u0103n b\u1ea3n kh\u00e1c nhau, vi\u1ec7c \u0111i\u1ec1u ch\u1ec9nh l\u1ec1 tr\u00e1i v\u00e0 c\u0103n ch\u1ec9nh nh\u00e3n s\u1ebd ng\u0103n ch\u1eb7n hi\u1ec7n t\u01b0\u1ee3ng nh\u00e3n b\u1ecb c\u1eaft.<\/p>\n
1. L\u1ec1 l\u01b0\u1edbi c\u1ee7a container<\/h3>\n
S\u1eed d\u1ee5ng kh\u1ed1i c\u1ea5u h\u00ecnhgrid<\/code> \u0111\u1ec3 c\u1ea5p \u0111\u1ee7 kh\u00f4ng gian cho c\u00e1c nh\u00e3n tr\u1ee5c Y d\u00e0i:<\/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    l\u01b0\u1edbi: {\r\n        tr\u00e1i: '15%',  \/\/ T\u0103ng l\u1ec1 tr\u00e1i cho v\u0103n b\u1ea3n danh m\u1ee5c d\u00e0i\r\n        ph\u1ea3i: '8%',\r\n        d\u01b0\u1edbi: '10%',\r\n        ch\u1ee9aNh\u00e3n: true\r\n    },\r\n    tr\u1ee5cX: {\r\n        lo\u1ea1i: 'gi\u00e1 tr\u1ecb'\r\n    },\r\n    tr\u1ee5cY: {\r\n        lo\u1ea1i: 'danh m\u1ee5c',\r\n        d\u1eef li\u1ec7u: [\r\n            'Hi\u1ec7n \u0111\u1ea1i h\u00f3a c\u01a1 s\u1edf h\u1ea1 t\u1ea7ng doanh nghi\u1ec7p',\r\n            'Giai \u0111o\u1ea1n 2 chuy\u1ec3n \u0111\u1ed5i \u0111\u00e1m m\u00e2y',\r\n            'T\u1ed1i \u01b0u h\u00f3a c\u01a1 s\u1edf d\u1eef li\u1ec7u',\r\n            'Thi\u1ebft k\u1ebf l\u1ea1i c\u1ed5ng API'\r\n        ]\r\n    },\r\n    chu\u1ed7i: [\r\n        {\r\n            lo\u1ea1i: 'thanh',\r\n            d\u1eef li\u1ec7u: [75, 60, 90, 40],\r\n            \u0111\u1ed9R\u1ed9ngTh\u00e0nh: '50%'\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\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
  • S\u1eafp x\u1ebfp d\u1eef li\u1ec7u m\u1ed9t c\u00e1ch c\u00f3 ch\u1ee7 \u00fd:<\/strong> S\u1eafp x\u1ebfp c\u00e1c thanh ngang theo th\u1ee9 t\u1ef1 t\u0103ng d\u1ea7n ho\u1eb7c gi\u1ea3m d\u1ea7n m\u1ed7i khi c\u00f3 th\u1ec3. Danh s\u00e1ch \u0111\u01b0\u1ee3c x\u1ebfp h\u1ea1ng gi\u00fap ng\u01b0\u1eddi \u0111\u1ecdc nh\u1eadn ra ngay l\u1eadp t\u1ee9c nh\u1eefng ng\u01b0\u1eddi d\u1eabn \u0111\u1ea7u.<\/li>\n
  • S\u1eed d\u1ee5ngcontainLabel: true<\/code>:<\/strong> Lu\u00f4n lu\u00f4n bao g\u1ed3m containLabel: true<\/code> b\u00ean trong l\u01b0\u1edbi<\/code> c\u1ea5u h\u00ecnh \u0111\u1ec3 ng\u0103n c\u00e1c ti\u00eau \u0111\u1ec1 danh m\u1ee5c d\u00e0i b\u1ecb tr\u00e0n ra kh\u1ecfi m\u00e9p b\u1ea3ng v\u1ebd.<\/li>\n
  • Nh\u00e3n gi\u00e1 tr\u1ecb tr\u1ef1c ti\u1ebfp:<\/strong> \u0110\u1ec3 b\u1ea3ng x\u1ebfp h\u1ea1ng s\u1ea1ch s\u1ebd, h\u00e3y c\u00e2n nh\u1eafc hi\u1ec3n th\u1ecb c\u00e1c gi\u00e1 tr\u1ecb d\u1eef li\u1ec7u tr\u1ef1c ti\u1ebfp \u1edf cu\u1ed1i m\u1ed7i thanh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng label: { show: true, position: 'right' }<\/code> v\u00e0 \u1ea9n ho\u00e0n to\u00e0n tr\u1ee5c d\u1ecdc s\u1ed1 h\u1ecdc.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Ngang Bi\u1ec3u \u0111\u1ed3 c\u1ed9tr\u1ea5t l\u00fd t\u01b0\u1edfng \u0111\u1ec3 hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u x\u1ebfp h\u1ea1ng, t\u00ean danh m\u1ee5c d\u00e0i d\u00f2ng ho\u1eb7c c\u00e1c ch\u1ec9 s\u1ed1 ti\u1ebfn \u0111\u1ed9. B\u1eb1ng c\u00e1ch k\u00e9o d\u00e0i c\u00e1c c\u1ed9t d\u1ecdc theo tr\u1ee5c X, c\u1ea5u tr\u00fac tr\u1ef1c quan n\u00e0y cung…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":2,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2068","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Bar Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\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\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\",\"name\":\"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\",\"datePublished\":\"2026-07-24T09:33:45+00:00\",\"description\":\"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a6331aa83b81.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/bar-chart-horizontal-layout-and-label-optimization-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: B\u1ed1 c\u1ee5c ngang v\u00e0 t\u1ed1i \u01b0u h\u00f3a nh\u00e3n\"}]},{\"@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 Bar Chart Guide | VPasCode Text to Diagram Tool","description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool","og_description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\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\/bar-chart-horizontal-layout-and-label-optimization-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/","name":"ECharts Bar Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png","datePublished":"2026-07-24T09:33:45+00:00","description":"Render horizontal bar graphs from code using ECharts in VPasCode, an agile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a6331aa83b81.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/bar-chart-horizontal-layout-and-label-optimization-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: B\u1ed1 c\u1ee5c ngang v\u00e0 t\u1ed1i \u01b0u h\u00f3a nh\u00e3n"}]},{"@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\/2068","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=2068"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}