{"id":2085,"date":"2026-07-02T09:35:52","date_gmt":"2026-07-02T09:35:52","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-pie-chart-syntax-data-guide\/"},"modified":"2026-07-02T09:35:52","modified_gmt":"2026-07-02T09:35:52","slug":"mermaid-js-pie-chart-syntax-data-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u00fa ph\u00e1p v\u00e0 d\u1eef li\u1ec7u bi\u1ec3u \u0111\u1ed3 tr\u00f2n Mermaid.js"},"content":{"rendered":"

Bi\u1ec3u \u0111\u1ed3 tr\u00f2n l\u00e0 c\u00e1c \u0111\u1ed3 h\u1ecda th\u1ed1ng k\u00ea h\u00ecnh tr\u00f2n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c t\u1ef7 l\u1ec7 s\u1ed1 h\u1ecdc b\u1eb1ng c\u00e1ch chia d\u1eef li\u1ec7u th\u00e0nh c\u00e1c ph\u1ea7n. Trong Mermaid.js, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o c\u00e1c ph\u00e2n t\u00edch d\u1eef li\u1ec7u s\u1ea1ch, ph\u1ea3n \u1ee9ng nhanh t\u1ef1 \u0111\u1ed9ng m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i thao t\u00e1c v\u1edbi c\u00e1c th\u01b0 vi\u1ec7n bi\u1ec3u \u0111\u1ed3 ph\u1ee9c t\u1ea1p hay c\u00e1c c\u00f4ng c\u1ee5 thi\u1ebft k\u1ebf vector. \u0110\u1ed9ng c\u01a1 hi\u1ec3n th\u1ecb s\u1ebd x\u1eed l\u00fd t\u1ea5t c\u1ea3 vi\u1ec7c g\u00e1n m\u00e0u s\u1eafc v\u00e0 t\u00ednh to\u00e1n ph\u1ea7n tr\u0103m m\u1ed9t c\u00e1ch \u0111\u1ed9ng.<\/p>\n

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

M\u1ed7i bi\u1ec3u \u0111\u1ed3 tr\u00f2n b\u1eaft \u0111\u1ea7u b\u1eb1ng pie<\/code>khai b\u00e1o. B\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ecdn th\u00eam ti\u00eau \u0111\u1ec1, theo sau l\u00e0 c\u00e1c m\u1ee5c d\u1eef li\u1ec7u n\u01a1i nh\u00e3n danh m\u1ee5c \u0111\u01b0\u1ee3c bao quanh b\u1eb1ng d\u1ea5u ngo\u1eb7c k\u00e9p v\u00e0 gh\u00e9p c\u1eb7p v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb s\u1ed1 d\u01b0\u01a1ng.<\/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 
pie\r\ntitle Bi\u1ec3u \u0111\u1ed3 tr\u00f2n m\u1eabu\r\n\"Danh m\u1ee5c A\" : 45\r\n\"Danh m\u1ee5c B\" : 30\r\n\"Danh m\u1ee5c C\" : 25<\/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 t\u00f9y ch\u1ecdn c\u1ea5u tr\u00fac c\u1ed1t l\u00f5i \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e2y d\u1ef1ng b\u1ea3n \u0111\u1ed3 bi\u1ec3u \u0111\u1ed3 tr\u00f2n trong Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Th\u00e0nh ph\u1ea7n<\/th>\nM\u00f4 t\u1ea3<\/th>\nV\u00ed d\u1ee5 c\u00fa ph\u00e1p<\/th>\n<\/tr>\n<\/thead>\n
Khai b\u00e1o<\/strong><\/td>\nKh\u1edfi t\u1ea1o \u0111\u1ed9ng c\u01a1 hi\u1ec3n th\u1ecb bi\u1ec3u \u0111\u1ed3 tr\u00f2n.<\/td>\npie<\/code><\/td>\n<\/tr>\n
C\u1edd hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u<\/strong><\/td>\nM\u1ed9t t\u00f9y ch\u1ecdn s\u1eeda \u0111\u1ed5i \u0111\u01b0\u1ee3c th\u00eam ngay sau pie<\/code>\u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c con s\u1ed1 th\u1ef1c t\u1ebf c\u00f9ng v\u1edbi c\u00e1c ph\u1ea7n tr\u0103m \u0111\u00e3 t\u00ednh to\u00e1n.<\/td>\npie showData<\/code><\/td>\n<\/tr>\n
Ti\u00eau \u0111\u1ec1<\/strong><\/td>\nM\u1ed9t ti\u00eau \u0111\u1ec1 t\u00f9y ch\u1ecdn \u0111\u01b0\u1ee3c in r\u00f5 r\u00e0ng ph\u00eda tr\u00ean t\u00e2m b\u1ed1 c\u1ee5c bi\u1ec3u \u0111\u1ed3.<\/td>\ntitle Ngu\u1ed3n doanh thu Q3<\/code><\/td>\n<\/tr>\n
Nh\u00e3n m\u1ee5c nh\u1eadp d\u1eef li\u1ec7u<\/strong><\/td>\nT\u00ean danh m\u1ee5c, lu\u00f4n ph\u1ea3i \u0111\u01b0\u1ee3c \u0111\u00f3ng trong d\u1ea5u ngo\u1eb7c k\u00e9p.<\/td>\n\"T\u00ecm ki\u1ebfm t\u1ef1 nhi\u00ean\"<\/code><\/td>\n<\/tr>\n
D\u1ea5u ph\u00e2n c\u00e1ch d\u1eef li\u1ec7u<\/strong><\/td>\nM\u1ed9t k\u00fd t\u1ef1 hai ch\u1ea5m t\u00e1ch chu\u1ed7i nh\u00e3n c\u1ee7a b\u1ea1n kh\u1ecfi gi\u00e1 tr\u1ecb to\u00e1n h\u1ecdc c\u1ee7a n\u00f3.<\/td>\n:<\/code><\/td>\n<\/tr>\n
Gi\u00e1 tr\u1ecb d\u1eef li\u1ec7u<\/strong><\/td>\nM\u1ed9t s\u1ed1 d\u01b0\u01a1ng. H\u1ed7 tr\u1ee3 c\u00e1c con s\u1ed1 tuy\u1ec7t \u0111\u1ed1i ho\u1eb7c tr\u1ecdng s\u1ed1 th\u1eadp ph\u00e2n tr\u1ef1c ti\u1ebfp l\u00ean \u0111\u1ebfn hai ch\u1eef s\u1ed1 th\u1eadp ph\u00e2n.<\/td>\n54.25<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
B\u1ea3n thi\u1ebft k\u1ebf th\u1ef1c t\u1ebf: Ngu\u1ed3n truy c\u1eadp trang web<\/h2>\n
B\u1ea3n thi\u1ebft k\u1ebf n\u00e0y th\u1ec3 hi\u1ec7n s\u1ef1 ph\u00e2n t\u00edch b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n ti\u1ebfp th\u1ecb v\u00e0 ph\u00e2n t\u00edch truy\u1ec1n th\u1ed1ng. N\u00f3 s\u1eed d\u1ee5ng tham s\u1ed1 showData<\/code> \u0111\u1ec3 hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng c\u00e1c ch\u1ec9 s\u1ed1 l\u01b0u l\u01b0\u1ee3ng truy c\u1eadp th\u00f4 ngay trong ch\u00fa th\u00edch, trong khi bi\u1ec3u \u0111\u1ed3 th\u1ec3 hi\u1ec7n t\u1ef7 l\u1ec7 b\u1ed1 c\u1ee5c.<\/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                    
pie showData title C\u00e1c k\u00eanh l\u01b0u l\u01b0\u1ee3ng ch\u00ednh\r\n\"T\u00ecm ki\u1ebfm t\u1ef1 nhi\u00ean\" : 3540\r\n\"L\u01b0u l\u01b0\u1ee3ng tr\u1ef1c ti\u1ebfp\" : 2410\r\n\"M\u1ea1ng x\u00e3 h\u1ed9i\" : 1850\r\n\"Trang gi\u1edbi thi\u1ec7u\" : 920\r\n\"Chi\u1ebfn d\u1ecbch email\" : 680<\/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> M\u1eb7c \u0111\u1ecbnh, Mermaid ch\u1ec9 hi\u1ec3n th\u1ecb c\u00e1c ph\u1ea7n tr\u0103m \u0111\u00e3 t\u00ednh to\u00e1n t\u01b0\u01a1ng \u0111\u1ed1i (v\u00ed d\u1ee5: 35%) tr\u00ean t\u1eebng ph\u1ea7n bi\u1ec3u \u0111\u1ed3. Th\u00eam t\u1eeb kh\u00f3a showData<\/code> ngay sau pie<\/code> s\u1ebd thay \u0111\u1ed5i nh\u00e3n \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u1ea3 ph\u1ea7n tr\u0103m tr\u00ean bi\u1ec3u \u0111\u1ed3 v\u00e0 c\u00e1c gi\u00e1 tr\u1ecb th\u00f4 ch\u00ednh x\u00e1c b\u00ean trong danh s\u00e1ch ch\u00fa th\u00edch \u0111i k\u00e8m.<\/em><\/p>\n\n
Kh\u00e1i ni\u1ec7m n\u00e2ng cao: Ch\u1ec9 th\u1ecb v\u00e0 \u0111\u1ecbnh d\u1ea1ng<\/h2>\n
\u0110\u1ed1i v\u1edbi c\u00e1c trang t\u00e0i li\u1ec7u m\u1eadt \u0111\u1ed9 cao, b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng m\u1ed9t ch\u1ec9 th\u1ecb c\u1ea5u h\u00ecnh nh\u00fang \u1edf \u0111\u1ea7u \u0111o\u1ea1n m\u00e3 c\u1ee7a m\u00ecnh \u0111\u1ec3 t\u00f9y ch\u1ec9nh h\u00e0nh vi \u0111\u1ecbnh d\u1ea1ng, thay \u0111\u1ed5i \u0111\u1ed9 l\u1ec7ch v\u1ecb tr\u00ed v\u0103n b\u1ea3n ho\u1eb7c thay \u0111\u1ed5i ki\u1ec3u d\u00e1ng \u0111\u01b0\u1eddng c\u1ea5u tr\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  pie:\r\n    textPosition: 0.6\r\n  themeVariables:\r\n    pieOuterStrokeWidth: \"3px\"\r\n---\r\npie title Ph\u00e2n b\u1ed5 ng\u00e2n s\u00e1ch ho\u1ea1t \u0111\u1ed9ng\r\n\"Ph\u00e1t tri\u1ec3n s\u1ea3n ph\u1ea9m\" : 40.5\r\n\"Ti\u1ebfp th\u1ecb & t\u0103ng tr\u01b0\u1edfng\" : 25.25\r\n\"V\u1eadn h\u00e0nh kh\u00e1ch h\u00e0ng\" : 20.0\r\n\"Chi ph\u00ed h\u00e0nh ch\u00ednh\" : 14.25<\/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
Nh\u1eefng l\u1ed7i c\u00fa ph\u00e1p ph\u1ed5 bi\u1ebfn<\/h2>\n
M\u1eb7c d\u00f9 bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u00f3 m\u1ed9t trong nh\u1eefng c\u00fa ph\u00e1p \u0111\u01a1n gi\u1ea3n nh\u1ea5t trong Mermaid, nh\u01b0ng m\u1ed9t v\u00e0i l\u1ed7i \u0111\u1ecbnh d\u1ea1ng s\u1ebd g\u00e2y l\u1ed7i ph\u00e2n t\u00edch b\u1ed1 c\u1ee5c. H\u00e3y tr\u00e1nh nh\u1eefng l\u1ed7i ph\u1ed5 bi\u1ebfn n\u00e0y:<\/p>\n
    \n
  • S\u1ed1 \u00e2m:<\/strong> B\u1ed9 x\u1eed l\u00fd hi\u1ec3n th\u1ecb ch\u1ec9 ch\u1ea5p nh\u1eadn c\u00e1c gi\u00e1 tr\u1ecb s\u1ed1 d\u01b0\u01a1ng. Truy\u1ec1n m\u1ed9t gi\u00e1 tr\u1ecb \u00e2m ho\u1eb7c b\u1eb1ng kh\u00f4ng s\u1ebd l\u00e0m v\u1ee1 gi\u1edbi h\u1ea1n x\u1eed l\u00fd to\u00e1n h\u1ecdc.<\/li>\n
  • Y\u00eau c\u1ea7u d\u1ea5u ngo\u1eb7c k\u00e9p:<\/strong> C\u00e1c nh\u00e3n danh m\u1ee5c d\u1eef li\u1ec7u lu\u00f4n ph\u1ea3i s\u1eed d\u1ee5ng d\u1ea5u ngo\u1eb7c k\u00e9p. D\u1ea5u ngo\u1eb7c \u0111\u01a1n ho\u1eb7c thi\u1ebfu d\u1ea5u ngo\u1eb7c s\u1ebd khi\u1ebfn vi\u1ec7c x\u00e2y d\u1ef1ng kh\u00f4ng th\u00e0nh c\u00f4ng.<\/li>\n
  • Gi\u1edbi h\u1ea1n \u0111\u1ed9 ch\u00ednh x\u00e1c th\u1eadp ph\u00e2n:<\/strong> M\u1eb7c d\u00f9 Mermaid x\u1eed l\u00fd c\u00e1c s\u1ed1 th\u1eadp ph\u00e2n d\u1ea5u ph\u1ea9y \u0111\u1ed9ng ch\u00ednh x\u00e1c m\u1ed9t c\u00e1ch tr\u01a1n tru, nh\u01b0ng n\u00f3 m\u1eb7c \u0111\u1ecbnh theo d\u00f5i c\u00e1c tham s\u1ed1 l\u00ean \u0111\u1ebfn hai ch\u1eef s\u1ed1 th\u1eadp ph\u00e2n. L\u00e0m tr\u00f2n c\u00e1c gi\u00e1 tr\u1ecb tr\u01b0\u1edbc s\u1ebd \u0111\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n nghi\u00eam ng\u1eb7t.<\/li>\n
  • M\u1eadt \u0111\u1ed9 mi\u1ebfng c\u1eaft:<\/strong> \u0110\u1ec3 truy\u1ec1n \u0111\u1ea1t h\u00ecnh \u1ea3nh m\u1ed9t c\u00e1ch r\u00f5 r\u00e0ng, t\u1ed1t nh\u1ea5t l\u00e0 gi\u1edbi h\u1ea1n bi\u1ec3u \u0111\u1ed3 c\u1ee7a b\u1ea1n trong kho\u1ea3ng 6\u20138 mi\u1ebfng c\u1eaft. N\u1ebfu t\u1eadp d\u1eef li\u1ec7u c\u1ee7a b\u1ea1n c\u00f3 nhi\u1ec1u ph\u1ea7n t\u1eed h\u01a1n, h\u00e3y nh\u00f3m c\u00e1c n\u00fat nh\u1ecf l\u1ea1i v\u1edbi nhau d\u01b0\u1edbi danh m\u1ee5c \u201cKh\u00e1c\u201d \u0111\u1ec3 thi\u1ebft k\u1ebf c\u1ee7a b\u1ea1n v\u1eabn d\u1ec5 quan s\u00e1t.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Bi\u1ec3u \u0111\u1ed3 tr\u00f2n l\u00e0 c\u00e1c \u0111\u1ed3 h\u1ecda th\u1ed1ng k\u00ea h\u00ecnh tr\u00f2n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c t\u1ef7 l\u1ec7 s\u1ed1 h\u1ecdc b\u1eb1ng c\u00e1ch chia d\u1eef li\u1ec7u th\u00e0nh c\u00e1c ph\u1ea7n. Trong Mermaid.js, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o c\u00e1c ph\u00e2n t\u00edch d\u1eef…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":12,"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-2085","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid Pie Chart Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram 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-pie-chart-syntax-data-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-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_6a46313c62838.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\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\",\"name\":\"Mermaid Pie 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-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"datePublished\":\"2026-07-02T09:35:52+00:00\",\"description\":\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-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 d\u1eef li\u1ec7u bi\u1ec3u \u0111\u1ed3 tr\u00f2n 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 Pie Chart Syntax | VPasCode Text to Diagram Guide","description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram 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-pie-chart-syntax-data-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide","og_description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.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\/mermaid-js-pie-chart-syntax-data-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","name":"Mermaid Pie 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-pie-chart-syntax-data-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png","datePublished":"2026-07-02T09:35:52+00:00","description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-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 d\u1eef li\u1ec7u bi\u1ec3u \u0111\u1ed3 tr\u00f2n 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\/2085","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=2085"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}