{"id":929,"date":"2026-07-07T08:59:56","date_gmt":"2026-07-07T08:59:56","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/mermaid-js-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/"},"modified":"2026-07-29T08:35:21","modified_gmt":"2026-07-29T08:35:21","slug":"mermaid-js-xy-chart-syntax-configuration-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/","title":{"rendered":"Mermaid.js XY Chart Syntax & Configuration Guide"},"content":{"rendered":"

An XY Chart is a comprehensive data visualization component used to render both line charts and bar charts on a standard two-dimensional grid coordinate layout. Introduced to replace and consolidate older standalone charting schemas, the xychart-beta<\/code> rendering engine dynamically processes custom numerical datasets, auto-scales responsive structural grids, and supports displaying multiple independent overlapping data series at the same time.<\/p>\n

Basic Syntax Structure<\/h2>\n

Every XY Chart begins with the xychart-beta<\/code> declaration header. It is followed by configuring a horizontal X-axis category array, a vertical Y-axis title or data range limit, and at least one explicit data plotting series (such as a line<\/code> or bar<\/code> block).<\/p>\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 \"Sample Performance Chart\"\r\n  x-axis [Jan, Feb, Mar, Apr]\r\n  y-axis \"Revenue (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>\n
Syntax Reference<\/h2>\n
The table below breaks down the primary data definitions and configuration keys required to structure an XY Chart correctly in Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Syntax Component<\/th>\nAccepted Formats<\/th>\nDescription & Usage Rules<\/th>\n<\/tr>\n<\/thead>\n
Declaration<\/strong><\/td>\nKeyword<\/td>\nInitializes the 2D layout chart workspace. Must use the exact xychart-beta<\/code> string block.<\/td>\n<\/tr>\n
Title<\/strong><\/td>\nQuoted String<\/td>\nAn optional global heading displayed centered immediately above the chart canvas grid.<\/td>\n<\/tr>\n
X-Axis Configuration<\/strong><\/td>\nBracketed List \/ Range<\/td>\nDefines horizontal scale labels. Accepts categorical text strings inside brackets [A, B, C]<\/code> or numerical point ranges [100 --> 500]<\/code>.<\/td>\n<\/tr>\n
Y-Axis Configuration<\/strong><\/td>\nTitle String \/ Scale Bounds<\/td>\nSets up the vertical scale parameters. Can simply be an axis title string, or customized to limit lower\/upper value ranges using \"Title\" 0 --> 100<\/code>.<\/td>\n<\/tr>\n
Bar Plotting Series<\/strong><\/td>\nNumeric Array<\/td>\nRenders datasets as vertical bars. The count of elements inside the data array must perfectly match your X-axis category length.<\/td>\n<\/tr>\n
Line Plotting Series<\/strong><\/td>\nNumeric Array<\/td>\nRenders datasets as continuous lines connecting data points across the grid workspace.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Advanced Data Customization (Directives)<\/h2>\n
You can fine-tune your chart workspace’s visual look by embedding a frontmatter configuration block at the absolute top of your document code snippet. This gives you complete layout control over custom hex colors, plot series line weights, and grid display visibility fields.<\/p>\n
XY Chart Configuration Attribute Matrix<\/h3>\n\n\n\n\n\n\n\n\n
Property Configuration Key<\/th>\nValue Options<\/th>\nVisual Result<\/th>\n<\/tr>\n<\/thead>\n
showLine<\/code><\/td>\ntrue<\/code> | false<\/code><\/td>\nToggles whether the background structural axis line grid strokes display across coordinates.<\/td>\n<\/tr>\n
chartWidth<\/code><\/td>\nInteger (Pixels)<\/td>\nSets the fixed bounding canvas layout width of the grid system.<\/td>\n<\/tr>\n
chartHeight<\/code><\/td>\nInteger (Pixels)<\/td>\nSets the fixed bounding canvas layout height of the grid system.<\/td>\n<\/tr>\n
themeVariables.xyChart<\/code><\/td>\nColor Mapping Arrays<\/td>\nInjects explicit hex styling color blocks (e.g., backgroundColor<\/code>, titleColor<\/code>, or custom color list slots plotColorPalette<\/code>) into your plots.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Real-World Blueprint: Multi-Series Technical Comparison<\/h2>\n
This comprehensive blueprint tracks an infrastructure performance review. It utilizes a custom config directive to fix the canvas dimension sizes, show background grid line paths, and inject an explicit hex color palette. It maps four distinct quarterly phases, rendering them as a combined visual combination chart (overlapping bar series and line series charts together).<\/p>\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 \"Q1-Q4 Resource vs Execution Metrics\"\r\n  x-axis [\"Quarter 1\", \"Quarter 2\", \"Quarter 3\", \"Quarter 4\"]\r\n  y-axis \"Performance Metric Units\" 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>\n
\n
Syntax Tip:<\/strong> When overlaying multiple data plots (such as running a bar<\/code> dataset and a line<\/code> dataset inside the same layout canvas), the rendering engine will stack or draw them sequentially in the order they are written in the text script. Arrange your data blocks intentionally to avoid visual clipping on the canvas lines.<\/em><\/p>\n
\n
Common Syntax Pitfalls & System Constraints<\/h2>\n
When compiling dimensional matrix paths, a few subtle configuration slips will disrupt coordinates calculations. Keep these troubleshooting parameters in mind:<\/p>\n
    \n
  • Data Length Mismatch:<\/strong> Every single bar<\/code> or line<\/code> data series array *must* contain the exact same number of entries as defined in your x-axis<\/code> list parameter. Having 4 categories on your X-axis but providing a data list of 5 numbers will completely break chart compilation.<\/li>\n
  • Quotation Boundaries:<\/strong> When specifying categories inside an axis list brackets, text blocks that contain spaces or special punctuation characters must be enclosed cleanly in double quotation marks (e.g., [\"Phase 1\", \"Phase 2\"]<\/code>).<\/li>\n
  • Numerical Coordinate Bounds:<\/strong> When setting manual ranges on an axis scale (such as 0 --> 500<\/code>), you must explicitly use two dashes followed by a greater-than symbol (--><\/code>). Forgetting a dash or separating the operator characters with spaces will trigger a processing layout error.<\/li>\n
  • Positive Integer Weights:<\/strong> Scale values map to linear space blocks. Ensure values passed to your series do not contain unescaped character elements or empty parameter null voids inside arrays.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    An XY Chart is a comprehensive data visualization component used to render both line charts and bar charts on a standard two-dimensional grid coordinate layout. Introduced to replace and consolidate older standalone charting schemas, the xychart-beta rendering engine dynamically processes…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":48,"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-929","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-playbook\/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-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:35:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/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-playbook\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/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-playbook\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\",\"datePublished\":\"2026-07-07T08:59:56+00:00\",\"dateModified\":\"2026-07-29T08:35:21+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-playbook\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a4cc0702c7c7.png\",\"width\":700,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/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\":\"Mermaid.js Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Mermaid.js XY Chart Syntax & Configuration Guide\"}]},{\"@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-playbook\/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-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:35:21+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/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-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/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-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a4cc0702c7c7.png","datePublished":"2026-07-07T08:59:56+00:00","dateModified":"2026-07-29T08:35:21+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-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a4cc0702c7c7.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a4cc0702c7c7.png","width":700,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/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":"Mermaid.js Playbook","item":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/mermaid-js-playbook\/"},{"@type":"ListItem","position":4,"name":"Mermaid.js XY Chart Syntax & Configuration Guide"}]},{"@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\/929","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"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/48"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=929"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}