{"id":2081,"date":"2026-07-07T08:59:56","date_gmt":"2026-07-07T08:59:56","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-xy-chart-syntax-configuration-guide\/"},"modified":"2026-07-07T08:59:56","modified_gmt":"2026-07-07T08:59:56","slug":"mermaid-js-xy-chart-syntax-configuration-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p v\u00e0 c\u1ea5u h\u00ecnh bi\u1ec3u \u0111\u1ed3 XY Mermaid.js"},"content":{"rendered":"

Bi\u1ec3u \u0111\u1ed3 XY l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n tr\u1ef1c quan h\u00f3a d\u1eef li\u1ec7u to\u00e0n di\u1ec7n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u1ea3 bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng v\u00e0 bi\u1ec3u \u0111\u1ed3 c\u1ed9t tr\u00ean b\u1ed1 c\u1ee5c l\u01b0\u1edbi t\u1ecda \u0111\u1ed9 hai chi\u1ec1u ti\u00eau chu\u1ea9n. \u0110\u01b0\u1ee3c gi\u1edbi thi\u1ec7u \u0111\u1ec3 thay th\u1ebf v\u00e0 t\u00edch h\u1ee3p c\u00e1c s\u01a1 \u0111\u1ed3 bi\u1ec3u \u0111\u1ed3 \u0111\u1ed9c l\u1eadp c\u0169 h\u01a1n, th\u00ecxychart-beta<\/code>\u0111\u1ed9ng c\u01a1 hi\u1ec3n th\u1ecb x\u1eed l\u00fd \u0111\u1ed9ng c\u00e1c b\u1ed9 d\u1eef li\u1ec7u s\u1ed1 t\u00f9y ch\u1ec9nh, t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 l\u1edbn l\u01b0\u1edbi c\u1ea5u tr\u00fac ph\u1ea3n h\u1ed3i, v\u00e0 h\u1ed7 tr\u1ee3 hi\u1ec3n th\u1ecb nhi\u1ec1u chu\u1ed7i d\u1eef li\u1ec7u \u0111\u1ed9c l\u1eadp ch\u1ed3ng ch\u00e9o nhau c\u00f9ng l\u00fac.<\/p>\n

C\u1ea5u tr\u00fac c\u00fa ph\u00e1p c\u01a1 b\u1ea3n<\/h2>\n

M\u1ed7i bi\u1ec3u \u0111\u1ed3 XY b\u1eaft \u0111\u1ea7u b\u1eb1ngxychart-beta<\/code>ti\u00eau \u0111\u1ec1 khai b\u00e1o. Ti\u1ebfp theo l\u00e0 c\u1ea5u h\u00ecnh m\u1ea3ng danh m\u1ee5c tr\u1ee5c X ngang, ti\u00eau \u0111\u1ec1 tr\u1ee5c Y d\u1ecdc ho\u1eb7c gi\u1edbi h\u1ea1n ph\u1ea1m vi d\u1eef li\u1ec7u, v\u00e0 \u00edt nh\u1ea5t m\u1ed9t chu\u1ed7i hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u r\u00f5 r\u00e0ng (v\u00ed d\u1ee5 nh\u01b0 m\u1ed9t kh\u1ed1iline<\/code>ho\u1eb7cbar<\/code>kh\u1ed1i).<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
xychart-beta\r\n  title \"Bi\u1ec3u \u0111\u1ed3 Hi\u1ec7u su\u1ea5t M\u1eabu\"\r\n  x-axis [Thg1, Thg2, Thg3, Thg4]\r\n  y-axis \"Doanh thu (USD)\"\r\n  bar [4500, 5200, 6100, 5800]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid 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 Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Tham chi\u1ebfu c\u00fa ph\u00e1p<\/h2>\n
B\u1ea3ng d\u01b0\u1edbi \u0111\u00e2y ph\u00e2n t\u00edch c\u00e1c \u0111\u1ecbnh ngh\u0129a d\u1eef li\u1ec7u ch\u00ednh v\u00e0 c\u00e1c kh\u00f3a c\u1ea5u h\u00ecnh c\u1ea7n thi\u1ebft \u0111\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 XY \u0111\u00fang c\u00e1ch trong Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Th\u00e0nh ph\u1ea7n c\u00fa ph\u00e1p<\/th>\n\u0110\u1ecbnh d\u1ea1ng \u0111\u01b0\u1ee3c ch\u1ea5p nh\u1eadn<\/th>\nM\u00f4 t\u1ea3 v\u00e0 quy t\u1eafc s\u1eed d\u1ee5ng<\/th>\n<\/tr>\n<\/thead>\n
Khai b\u00e1o<\/strong><\/td>\nT\u1eeb kh\u00f3a<\/td>\nKh\u1edfi t\u1ea1o kh\u00f4ng gian l\u00e0m vi\u1ec7c bi\u1ec3u \u0111\u1ed3 b\u1ed1 c\u1ee5c 2D. Ph\u1ea3i s\u1eed d\u1ee5ng ch\u00ednh x\u00e1c chu\u1ed7ixychart-beta<\/code>kh\u1ed1i chu\u1ed7i.<\/td>\n<\/tr>\n
Ti\u00eau \u0111\u1ec1<\/strong><\/td>\nChu\u1ed7i \u0111\u01b0\u1ee3c \u0111\u00f3ng d\u1ea5u ngo\u1eb7c k\u00e9p<\/td>\nTi\u00eau \u0111\u1ec1 t\u00f9y ch\u1ecdn \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf gi\u1eefa ngay ph\u00eda tr\u00ean l\u01b0\u1edbi khung bi\u1ec3u \u0111\u1ed3.<\/td>\n<\/tr>\n
C\u1ea5u h\u00ecnh tr\u1ee5c X<\/strong><\/td>\nDanh s\u00e1ch trong d\u1ea5u ngo\u1eb7c \/ Kho\u1ea3ng<\/td>\nX\u00e1c \u0111\u1ecbnh nh\u00e3n thang \u0111o ngang. Ch\u1ea5p nh\u1eadn c\u00e1c chu\u1ed7i v\u0103n b\u1ea3n ph\u00e2n lo\u1ea1i b\u00ean trong d\u1ea5u ngo\u1eb7c[A, B, C]<\/code> ho\u1eb7c c\u00e1c kho\u1ea3ng \u0111i\u1ec3m s\u1ed1 h\u1ecdc [100 --> 500]<\/code>.<\/td>\n<\/tr>\n
C\u1ea5u h\u00ecnh tr\u1ee5c Y<\/strong><\/td>\nChu\u1ed7i ti\u00eau \u0111\u1ec1 \/ Gi\u1edbi h\u1ea1n thang \u0111o<\/td>\nThi\u1ebft l\u1eadp c\u00e1c tham s\u1ed1 thang \u0111o d\u1ecdc. C\u00f3 th\u1ec3 ch\u1ec9 l\u00e0 chu\u1ed7i ti\u00eau \u0111\u1ec1 tr\u1ee5c, ho\u1eb7c \u0111\u01b0\u1ee3c t\u00f9y ch\u1ec9nh \u0111\u1ec3 gi\u1edbi h\u1ea1n ph\u1ea1m vi gi\u00e1 tr\u1ecb d\u01b0\u1edbi\/tr\u00ean b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng\"Ti\u00eau \u0111\u1ec1\" 0 --> 100<\/code>.<\/td>\n<\/tr>\n
D\u00e3y v\u1ebd bi\u1ec3u \u0111\u1ed3 c\u1ed9t<\/strong><\/td>\nM\u1ea3ng s\u1ed1 h\u1ecdc<\/td>\nHi\u1ec3n th\u1ecb d\u1eef li\u1ec7u d\u01b0\u1edbi d\u1ea1ng c\u00e1c c\u1ed9t th\u1eb3ng \u0111\u1ee9ng. S\u1ed1 l\u01b0\u1ee3ng ph\u1ea7n t\u1eed trong m\u1ea3ng d\u1eef li\u1ec7u ph\u1ea3i kh\u1edbp ho\u00e0n to\u00e0n v\u1edbi \u0111\u1ed9 d\u00e0i danh m\u1ee5c tr\u1ee5c X c\u1ee7a b\u1ea1n.<\/td>\n<\/tr>\n
D\u00e3y v\u1ebd bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng<\/strong><\/td>\nM\u1ea3ng s\u1ed1 h\u1ecdc<\/td>\nHi\u1ec3n th\u1ecb d\u1eef li\u1ec7u d\u01b0\u1edbi d\u1ea1ng c\u00e1c \u0111\u01b0\u1eddng li\u00ean t\u1ee5c n\u1ed1i c\u00e1c \u0111i\u1ec3m d\u1eef li\u1ec7u qua kh\u00f4ng gian l\u00e0m vi\u1ec7c l\u01b0\u1edbi.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
T\u00f9y ch\u1ec9nh d\u1eef li\u1ec7u n\u00e2ng cao (Ch\u1ec9 th\u1ecb)<\/h2>\n
B\u1ea1n c\u00f3 th\u1ec3 tinh ch\u1ec9nh ngo\u1ea1i h\u00ecnh tr\u1ef1c quan c\u1ee7a kh\u00f4ng gian l\u00e0m vi\u1ec7c bi\u1ec3u \u0111\u1ed3 b\u1eb1ng c\u00e1ch nh\u00fang m\u1ed9t kh\u1ed1i c\u1ea5u h\u00ecnh frontmatter \u1edf \u0111\u1ea7u tuy\u1ec7t \u0111\u1ed1i c\u1ee7a \u0111o\u1ea1n m\u00e3 t\u00e0i li\u1ec7u c\u1ee7a b\u1ea1n. \u0110i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ki\u1ec3m so\u00e1t ho\u00e0n to\u00e0n b\u1ed1 c\u1ee5c v\u1ec1 m\u00e0u s\u1eafc hex t\u00f9y ch\u1ec9nh, \u0111\u1ed9 d\u00e0y \u0111\u01b0\u1eddng c\u1ee7a c\u00e1c d\u00e3y v\u1ebd, v\u00e0 c\u00e1c tr\u01b0\u1eddng hi\u1ec3n th\u1ecb l\u01b0\u1edbi.<\/p>\n
Ma tr\u1eadn thu\u1ed9c t\u00ednh c\u1ea5u h\u00ecnh bi\u1ec3u \u0111\u1ed3 XY<\/h3>\n\n\n\n\n\n\n\n\n
Kh\u00f3a c\u1ea5u h\u00ecnh thu\u1ed9c t\u00ednh<\/th>\nL\u1ef1a ch\u1ecdn gi\u00e1 tr\u1ecb<\/th>\nK\u1ebft qu\u1ea3 tr\u1ef1c quan<\/th>\n<\/tr>\n<\/thead>\n
showLine<\/code><\/td>\n\u0111\u00fang<\/code> | sai<\/code><\/td>\nB\u1eadt\/t\u1eaft vi\u1ec7c hi\u1ec3n th\u1ecb c\u00e1c \u0111\u01b0\u1eddng l\u01b0\u1edbi tr\u1ee5c c\u1ea5u tr\u00fac n\u1ec1n tr\u00ean c\u00e1c t\u1ecda \u0111\u1ed9.<\/td>\n<\/tr>\n
chartWidth<\/code><\/td>\nS\u1ed1 nguy\u00ean (Pixel)<\/td>\nThi\u1ebft l\u1eadp chi\u1ec1u r\u1ed9ng b\u1ed1 c\u1ee5c khung h\u00ecnh c\u1ed1 \u0111\u1ecbnh c\u1ee7a h\u1ec7 th\u1ed1ng l\u01b0\u1edbi.<\/td>\n<\/tr>\n
chartHeight<\/code><\/td>\nS\u1ed1 nguy\u00ean (Pixel)<\/td>\nThi\u1ebft l\u1eadp chi\u1ec1u cao b\u1ed1 c\u1ee5c khung h\u00ecnh c\u1ed1 \u0111\u1ecbnh c\u1ee7a h\u1ec7 th\u1ed1ng l\u01b0\u1edbi.<\/td>\n<\/tr>\n
themeVariables.xyChart<\/code><\/td>\nM\u1ea3ng \u00e1nh x\u1ea1 m\u00e0u s\u1eafc<\/td>\nCh\u00e8n c\u00e1c kh\u1ed1i m\u00e0u \u0111\u1ecbnh d\u1ea1ng hex r\u00f5 r\u00e0ng (v\u00ed d\u1ee5 nh\u01b0 backgroundColor<\/code>, titleColor<\/code>, ho\u1eb7c c\u00e1c v\u1ecb tr\u00ed danh s\u00e1ch m\u00e0u t\u00f9y ch\u1ec9nh plotColorPalette<\/code>) v\u00e0o bi\u1ec3u \u0111\u1ed3 c\u1ee7a b\u1ea1n.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
B\u1ea3n thi\u1ebft k\u1ebf th\u1ef1c t\u1ebf: So s\u00e1nh k\u1ef9 thu\u1eadt \u0111a chu\u1ed7i<\/h2>\n
B\u1ea3n thi\u1ebft k\u1ebf to\u00e0n di\u1ec7n n\u00e0y theo d\u00f5i \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t c\u01a1 s\u1edf h\u1ea1 t\u1ea7ng. N\u00f3 s\u1eed d\u1ee5ng m\u1ed9t ch\u1ec9 th\u1ecb c\u1ea5u h\u00ecnh t\u00f9y ch\u1ec9nh \u0111\u1ec3 c\u1ed1 \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc khung h\u00ecnh, hi\u1ec3n th\u1ecb c\u00e1c \u0111\u01b0\u1eddng d\u1eabn l\u01b0\u1edbi n\u1ec1n v\u00e0 ch\u00e8n m\u1ed9t b\u1ea3ng m\u00e0u hex r\u00f5 r\u00e0ng. N\u00f3 \u00e1nh x\u1ea1 b\u1ed1n giai \u0111o\u1ea1n qu\u00fd kh\u00e1c nhau, hi\u1ec3n th\u1ecb ch\u00fang d\u01b0\u1edbi d\u1ea1ng bi\u1ec3u \u0111\u1ed3 k\u1ebft h\u1ee3p tr\u1ef1c quan (k\u1ebft h\u1ee3p bi\u1ec3u \u0111\u1ed3 c\u1ed9t ch\u1ed3ng l\u00ean nhau v\u00e0 bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng c\u00f9ng m\u1ed9t l\u00fac).<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
---\r\nconfig:\r\n  xychart:\r\n    chartWidth: 700\r\n    chartHeight: 400\r\n    showLine: true\r\n  themeVariables:\r\n    xychart:\r\n      titleColor: \"#0072B1\"\r\n      plotColorPalette: \"#0072B1, #E06000\"\r\n---\r\nxychart-beta\r\n  title \"Ch\u1ec9 s\u1ed1 T\u00e0i nguy\u00ean so v\u1edbi Th\u1ef1c thi Q1-Q4\"\r\n  x-axis [\"Qu\u00fd 1\", \"Qu\u00fd 2\", \"Qu\u00fd 3\", \"Qu\u00fd 4\"]\r\n  y-axis \"\u0110\u01a1n v\u1ecb Ch\u1ec9 s\u1ed1 Hi\u1ec7u su\u1ea5t\" 0 --> 100\r\n  bar [45, 65, 80, 95]\r\n  line [55, 60, 72, 88]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid 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 Mermaid trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
L\u01b0u \u00fd c\u00fa ph\u00e1p:<\/strong> Khi ch\u1ed3ng nhi\u1ec1u bi\u1ec3u \u0111\u1ed3 d\u1eef li\u1ec7u l\u00ean nhau (v\u00ed d\u1ee5 nh\u01b0 ch\u1ea1y m\u1ed9t d\u1eef li\u1ec7u bar<\/code> t\u1eadp d\u1eef li\u1ec7u v\u00e0 m\u1ed9t line<\/code> t\u1eadp d\u1eef li\u1ec7u b\u00ean trong c\u00f9ng m\u1ed9t khung b\u1ed1 c\u1ee5c), b\u1ed9 x\u1eed l\u00fd hi\u1ec3n th\u1ecb s\u1ebd x\u1ebfp ch\u1ed3ng ho\u1eb7c v\u1ebd ch\u00fang theo th\u1ee9 t\u1ef1 xu\u1ea5t hi\u1ec7n trong \u0111o\u1ea1n m\u00e3 v\u0103n b\u1ea3n. S\u1eafp x\u1ebfp c\u00e1c kh\u1ed1i d\u1eef li\u1ec7u m\u1ed9t c\u00e1ch c\u00f3 ch\u1ee7 \u00fd \u0111\u1ec3 tr\u00e1nh hi\u1ec7n t\u01b0\u1ee3ng b\u1ecb c\u1eaft h\u00ecnh \u1ea3nh tr\u00ean c\u00e1c \u0111\u01b0\u1eddng khung h\u00ecnh.<\/em><\/p>\n\n
Nh\u1eefng l\u1ed7i c\u00fa ph\u00e1p ph\u1ed5 bi\u1ebfn v\u00e0 gi\u1edbi h\u1ea1n h\u1ec7 th\u1ed1ng<\/h2>\n
Khi bi\u00ean d\u1ecbch c\u00e1c \u0111\u01b0\u1eddng \u0111i ma tr\u1eadn chi\u1ec1u, m\u1ed9t v\u00e0i l\u1ed7i c\u1ea5u h\u00ecnh tinh t\u1ebf s\u1ebd l\u00e0m gi\u00e1n \u0111o\u1ea1n t\u00ednh to\u00e1n t\u1ecda \u0111\u1ed9. H\u00e3y ghi nh\u1edb c\u00e1c tham s\u1ed1 kh\u1eafc ph\u1ee5c s\u1ef1 c\u1ed1 sau:<\/p>\n
    \n
  • Kh\u00f4ng kh\u1edbp \u0111\u1ed9 d\u00e0i d\u1eef li\u1ec7u:<\/strong> M\u1ed7i kh\u1ed1i d\u1eef li\u1ec7u bar<\/code> ho\u1eb7c \u0111\u01b0\u1eddng<\/code>m\u1ea3ng chu\u1ed7i d\u1eef li\u1ec7u *ph\u1ea3i* ch\u1ee9a \u0111\u00fang s\u1ed1 l\u01b0\u1ee3ng m\u1ee5c nh\u01b0 \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh trong tr\u1ee5c x<\/code> tham s\u1ed1 danh s\u00e1ch. Vi\u1ec7c c\u00f3 4 danh m\u1ee5c tr\u00ean tr\u1ee5c X nh\u01b0ng cung c\u1ea5p danh s\u00e1ch d\u1eef li\u1ec7u g\u1ed3m 5 s\u1ed1 s\u1ebd l\u00e0m h\u1ecfng ho\u00e0n to\u00e0n qu\u00e1 tr\u00ecnh bi\u00ean d\u1ecbch bi\u1ec3u \u0111\u1ed3.<\/li>\n
  • Bi\u00ean gi\u1edbi d\u1ea5u ngo\u1eb7c k\u00e9p:<\/strong> Khi x\u00e1c \u0111\u1ecbnh c\u00e1c danh m\u1ee5c b\u00ean trong d\u1ea5u ngo\u1eb7c m\u00f3c c\u1ee7a danh s\u00e1ch tr\u1ee5c, c\u00e1c kh\u1ed1i v\u0103n b\u1ea3n ch\u1ee9a kho\u1ea3ng tr\u1eafng ho\u1eb7c k\u00fd t\u1ef1 d\u1ea5u c\u00e2u \u0111\u1eb7c bi\u1ec7t ph\u1ea3i \u0111\u01b0\u1ee3c bao b\u1ecdc g\u1ecdn g\u00e0ng b\u1eb1ng d\u1ea5u ngo\u1eb7c k\u00e9p (v\u00ed d\u1ee5 nh\u01b0 [\"Giai \u0111o\u1ea1n 1\", \"Giai \u0111o\u1ea1n 2\"]<\/code>).<\/li>\n
  • Gi\u1edbi h\u1ea1n t\u1ecda \u0111\u1ed9 s\u1ed1 h\u1ecdc:<\/strong> Khi thi\u1ebft l\u1eadp ph\u1ea1m vi th\u1ee7 c\u00f4ng tr\u00ean thang \u0111o tr\u1ee5c (v\u00ed d\u1ee5 nh\u01b0 0 --> 500<\/code>), b\u1ea1n ph\u1ea3i s\u1eed d\u1ee5ng r\u00f5 r\u00e0ng hai g\u1ea1ch ngang theo sau l\u00e0 k\u00fd hi\u1ec7u l\u1edbn h\u01a1n (--><\/code>). B\u1ecf qu\u00ean m\u1ed9t g\u1ea1ch ngang ho\u1eb7c t\u00e1ch bi\u1ec7t c\u00e1c k\u00fd hi\u1ec7u to\u00e1n t\u1eed b\u1eb1ng kho\u1ea3ng tr\u1eafng s\u1ebd g\u00e2y ra l\u1ed7i b\u1ed1 c\u1ee5c x\u1eed l\u00fd.<\/li>\n
  • Tr\u1ecdng s\u1ed1 s\u1ed1 nguy\u00ean d\u01b0\u01a1ng:<\/strong> C\u00e1c gi\u00e1 tr\u1ecb thang \u0111o \u00e1nh x\u1ea1 v\u00e0o c\u00e1c kh\u1ed1i kh\u00f4ng gian tuy\u1ebfn t\u00ednh. \u0110\u1ea3m b\u1ea3o c\u00e1c gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c truy\u1ec1n v\u00e0o chu\u1ed7i c\u1ee7a b\u1ea1n kh\u00f4ng ch\u1ee9a c\u00e1c ph\u1ea7n t\u1eed k\u00fd t\u1ef1 ch\u01b0a \u0111\u01b0\u1ee3c tho\u00e1t ho\u1eb7c c\u00e1c tham s\u1ed1 r\u1ed7ng null b\u00ean trong m\u1ea3ng.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Bi\u1ec3u \u0111\u1ed3 XY l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n tr\u1ef1c quan h\u00f3a d\u1eef li\u1ec7u to\u00e0n di\u1ec7n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u1ea3 bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng v\u00e0 bi\u1ec3u \u0111\u1ed3 c\u1ed9t tr\u00ean b\u1ed1 c\u1ee5c l\u01b0\u1edbi t\u1ecda \u0111\u1ed9 hai chi\u1ec1u ti\u00eau chu\u1ea9n. \u0110\u01b0\u1ee3c gi\u1edbi…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":16,"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-2081","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid XY Chart Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free 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\/mermaid-js-xy-chart-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid XY Chart Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-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_6a4cc0702c7c7.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=\"4 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\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"name\":\"Mermaid XY Chart Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\",\"datePublished\":\"2026-07-07T08:59:56+00:00\",\"description\":\"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-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\":\"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p v\u00e0 c\u1ea5u h\u00ecnh bi\u1ec3u \u0111\u1ed3 XY Mermaid.js\"}]},{\"@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":"Mermaid XY Chart Syntax | VPasCode Text to Diagram Guide","description":"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free 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\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"Mermaid XY Chart Syntax | VPasCode Text to Diagram Guide","og_description":"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc0702c7c7.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"4 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","name":"Mermaid XY Chart Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc0702c7c7.png","datePublished":"2026-07-07T08:59:56+00:00","description":"Plot line and bar combination graphs from text scripts using Mermaid XY charts in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc0702c7c7.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc0702c7c7.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-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":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p v\u00e0 c\u1ea5u h\u00ecnh bi\u1ec3u \u0111\u1ed3 XY Mermaid.js"}]},{"@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\/2081","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=2081"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}