{"id":2086,"date":"2026-07-07T08:59:56","date_gmt":"2026-07-07T08:59:56","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","title":{"rendered":"Dokumentacja sk\u0142adni i konfiguracji wykresu XY w Mermaid.js"},"content":{"rendered":"

Wykres XY to kompleksowy komponent wizualizacji danych u\u017cywany do wy\u015bwietlania wykres\u00f3w liniowych i s\u0142upkowych na standardowej dwuwymiarowej siatce wsp\u00f3\u0142rz\u0119dnych. Wprowadzony w celu zast\u0105pienia i po\u0142\u0105czenia starszych, samodzielnych schemat\u00f3w wykres\u00f3w, xychart-beta<\/code> silnik renderuj\u0105cy dynamicznie przetwarza niestandardowe zestawy danych liczbowych, automatycznie skaluje odpowiednie siatki strukturalne i obs\u0142uguje wy\u015bwietlanie wielu niezale\u017cnych, nak\u0142adaj\u0105cych si\u0119 szereg\u00f3w danych jednocze\u015bnie.<\/p>\n

Podstawowa struktura sk\u0142adni<\/h2>\n

Ka\u017cdy wykres XY zaczyna si\u0119 od xychart-beta<\/code> nag\u0142\u00f3wka deklaracji. Nast\u0119pnie konfiguruje si\u0119 tablic\u0119 kategorii osi X poziomej, tytu\u0142 osi Y pionowej lub granice zakresu danych oraz co najmniej jedn\u0105 jawnie zdefiniowan\u0105 seri\u0119 danych do wykresu (tak\u0105 jak blok line<\/code> lub bar<\/code> blok).<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj Mermaid w 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 \"Przyk\u0142adowy wykres wydajno\u015bci\"\r\n  x-axis [Sty, Lut, Mar, Kwi]\r\n  y-axis \"Przych\u00f3d (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>
\nEdytuj Mermaid w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Odwo\u0142anie do sk\u0142adni<\/h2>\n
Poni\u017csza tabela rozk\u0142ada podstawowe definicje danych i klucze konfiguracji wymagane do poprawnego zbudowania wykresu XY w Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Sk\u0142adnik sk\u0142adni<\/th>\nAkceptowane formaty<\/th>\nOpis i zasady u\u017cytkowania<\/th>\n<\/tr>\n<\/thead>\n
Deklaracja<\/strong><\/td>\nS\u0142owo kluczowe<\/td>\nInicjuje obszar roboczy wykresu w uk\u0142adzie 2D. Nale\u017cy u\u017cy\u0107 dok\u0142adnie xychart-beta<\/code> bloku ci\u0105gu znak\u00f3w.<\/td>\n<\/tr>\n
Tytu\u0142<\/strong><\/td>\nCi\u0105g znak\u00f3w w cudzys\u0142owach<\/td>\nOpcjonalny globalny nag\u0142\u00f3wek wy\u015bwietlany wy\u015brodkowany bezpo\u015brednio nad siatk\u0105 wykresu.<\/td>\n<\/tr>\n
Konfiguracja osi X<\/strong><\/td>\nLista w nawiasach \/ Zakres<\/td>\nOkre\u015bla etykiety skali poziomej. Akceptuje ci\u0105gi tekstowe kategoryczne w nawiasach[A, B, C]<\/code>lub zakresy punkt\u00f3w numerycznych[100 --> 500]<\/code>.<\/td>\n<\/tr>\n
Konfiguracja osi Y<\/strong><\/td>\nCi\u0105g tytu\u0142u \/ Granice skali<\/td>\nUstawia parametry skali pionowej. Mo\u017ce to by\u0107 po prostu ci\u0105g tytu\u0142u osi, lub dostosowane do ograniczenia zakres\u00f3w warto\u015bci dolnych\/g\u00f3rnych przy u\u017cyciu\"Tytu\u0142\" 0 --> 100<\/code>.<\/td>\n<\/tr>\n
Seria wykresu s\u0142upkowego<\/strong><\/td>\nTablica numeryczna<\/td>\nRenderuje zestawy danych jako pionowe s\u0142upki. Liczba element\u00f3w w tablicy danych musi dok\u0142adnie odpowiada\u0107 d\u0142ugo\u015bci kategorii osi X.<\/td>\n<\/tr>\n
Seria wykresu liniowego<\/strong><\/td>\nTablica numeryczna<\/td>\nRenderuje zestawy danych jako ci\u0105g\u0142e linie \u0142\u0105cz\u0105ce punkty danych na przestrzeni siatki.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Zaawansowana personalizacja danych (dyrektywy)<\/h2>\n
Mo\u017cesz precyzyjnie dopasowa\u0107 wygl\u0105d wizualny obszaru wykresu, wstawiaj\u0105c blok konfiguracji frontmatter na samym pocz\u0105tku fragmentu kodu dokumentu. Dzi\u0119ki temu masz pe\u0142n\u0105 kontrol\u0119 nad uk\u0142adem, kolorami szesnastkowymi, grubo\u015bci\u0105 linii serii wykresu oraz widoczno\u015bci\u0105 siatki.<\/p>\n
Macierz atrybut\u00f3w konfiguracji wykresu XY<\/h3>\n\n\n\n\n\n\n\n\n
Klucz konfiguracji w\u0142a\u015bciwo\u015bci<\/th>\nOpcje warto\u015bci<\/th>\nWynik wizualny<\/th>\n<\/tr>\n<\/thead>\n
showLine<\/code><\/td>\ntrue<\/code> | false<\/code><\/td>\nW\u0142\u0105cza lub wy\u0142\u0105cza wy\u015bwietlanie linii siatki osi strukturalnej na tle wsp\u00f3\u0142rz\u0119dnych.<\/td>\n<\/tr>\n
chartWidth<\/code><\/td>\nLiczba ca\u0142kowita (piksele)<\/td>\nUstawia sta\u0142\u0105 szeroko\u015b\u0107 uk\u0142adu p\u0142\u00f3tna ograniczaj\u0105cego systemu siatki.<\/td>\n<\/tr>\n
wysokoscWykresu<\/code><\/td>\nLiczba ca\u0142kowita (piksele)<\/td>\nUstawia sta\u0142\u0105 wysoko\u015b\u0107 uk\u0142adu p\u0142\u00f3tna ograniczaj\u0105cego systemu siatki.<\/td>\n<\/tr>\n
zmienneTematu.xyWykres<\/code><\/td>\nTablice mapowania kolor\u00f3w<\/td>\nWstrzykuje jawne bloki kolor\u00f3w w formacie szesnastkowym (np. kolorTla<\/code>, kolorTytulu<\/code>, lub niestandardowe sloty listy kolor\u00f3w paletaKolorowWykresu<\/code>) do Twoich wykres\u00f3w.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Szczeg\u00f3\u0142owy projekt z rzeczywistego \u015bwiata: por\u00f3wnanie techniczne wieloseryjne<\/h2>\n
Ten kompleksowy projekt \u015bledzi przegl\u0105dy wydajno\u015bci infrastruktury. Wykorzystuje niestandardowy dyrektyw\u0119 konfiguracji w celu ustalenia rozmiar\u00f3w p\u0142\u00f3tna, pokazania \u015bcie\u017cek linii siatki t\u0142a oraz wstrzykni\u0119cia jawnej palety kolor\u00f3w w formacie szesnastkowym. Mapuje cztery r\u00f3\u017cne kwartalne fazy, renderuj\u0105c je jako po\u0142\u0105czony wykres wizualny (wykresy s\u0142upkowe i liniowe na\u0142o\u017cone na siebie).<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj Mermaid w 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    szerokoscWykresu: 700\r\n    wysokoscWykresu: 400\r\n    pokazLinie: true\r\n  themeVariables:\r\n    xychart:\r\n      kolorTytulu: \"#0072B1\"\r\n      paletaKolorowWykresu: \"#0072B1, #E06000\"\r\n---\r\nxychart-beta\r\n  tytul \"Metryki zasob\u00f3w vs wykonania Q1-Q4\"\r\n  o\u015bX [\"Kwarta\u0142 1\", \"Kwarta\u0142 2\", \"Kwarta\u0142 3\", \"Kwarta\u0142 4\"]\r\n  o\u015bY \"Jednostki metryk wydajno\u015bci\" 0 --> 100\r\n  slupki [45, 65, 80, 95]\r\n  linia [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>
\nEdytuj Mermaid w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Wskaz\u00f3wka sk\u0142adni:<\/strong> Gdy nak\u0142adamy wiele wykres\u00f3w danych (np. uruchamiaj\u0105c zestaw danych slupki<\/code> i zestaw danych linia<\/code> w tym samym uk\u0142adzie p\u0142\u00f3tna), silnik renderuj\u0105cy b\u0119dzie stosowa\u0107 je lub rysowa\u0107 je kolejno w kolejno\u015bci, w jakiej zosta\u0142y wpisane w skrypcie tekstowym. Ustawiaj bloki danych celowo, aby unikn\u0105\u0107 przycinania wizualnego na liniach p\u0142\u00f3tna.<\/em><\/p>\n\n
Typowe b\u0142\u0119dy sk\u0142adni i ograniczenia systemu<\/h2>\n
Podczas kompilowania \u015bcie\u017cek macierzy wymiar\u00f3w, kilka subtelnych b\u0142\u0119d\u00f3w konfiguracji mo\u017ce zak\u0142\u00f3ci\u0107 obliczenia wsp\u00f3\u0142rz\u0119dnych. Pami\u0119taj o tych parametrach diagnostycznych:<\/p>\n
    \n
  • Niezgodno\u015b\u0107 d\u0142ugo\u015bci danych:<\/strong> Ka\u017cdy pojedynczy slupki<\/code> lub linia<\/code>tablica serii danych *musi* zawiera\u0107 dok\u0142adnie tyle samo element\u00f3w, ile okre\u015blono w twoim o\u015b X<\/code>parametr listy. Posiadanie 4 kategorii na osi X, ale podanie listy danych z 5 liczbami ca\u0142kowitymi ca\u0142kowicie zepsuje kompilacj\u0119 wykresu.<\/li>\n
  • Granice cudzys\u0142ow\u00f3w:<\/strong> Podczas okre\u015blania kategorii wewn\u0105trz nawias\u00f3w listy osi, bloki tekstowe zawieraj\u0105ce spacje lub znaki specjalne musz\u0105 by\u0107 dok\u0142adnie otoczone podw\u00f3jnymi cudzys\u0142owami (np. [\"Faza 1\", \"Faza 2\"]<\/code>).<\/li>\n
  • Granice wsp\u00f3\u0142rz\u0119dnych numerycznych:<\/strong> Podczas ustawiania r\u0119cznych zakres\u00f3w na skali osi (np. 0 --> 500<\/code>), musisz jawnie u\u017cy\u0107 dw\u00f3ch my\u015blnik\u00f3w, a nast\u0119pnie znaku wi\u0119kszo\u015bci (--><\/code>). Pomini\u0119cie my\u015blnika lub rozdzielenie znak\u00f3w operatora spacjami spowoduje b\u0142\u0105d przetwarzania uk\u0142adu.<\/li>\n
  • Dodatnie liczby ca\u0142kowite jako wagi:<\/strong> Warto\u015bci skali mapuj\u0105 si\u0119 na bloki przestrzeni liniowej. Upewnij si\u0119, \u017ce przekazywane warto\u015bci do serii nie zawieraj\u0105 nieescaped element\u00f3w znakowych ani pustych null-\u00f3w parametr\u00f3w wewn\u0105trz tablic.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Wykres XY to kompleksowy komponent wizualizacji danych u\u017cywany do wy\u015bwietlania wykres\u00f3w liniowych i s\u0142upkowych na standardowej dwuwymiarowej siatce wsp\u00f3\u0142rz\u0119dnych. Wprowadzony w celu zast\u0105pienia i po\u0142\u0105czenia starszych, samodzielnych schemat\u00f3w wykres\u00f3w, xychart-beta silnik renderuj\u0105cy dynamicznie przetwarza niestandardowe zestawy danych liczbowych, automatycznie skaluje…<\/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-2086","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\/pl\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\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\/pl\/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=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-xy-chart-syntax-configuration-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dokumentacja sk\u0142adni i konfiguracji wykresu XY w Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/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\/pl\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","og_locale":"pl_PL","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\/pl\/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":{"Szacowany czas czytania":"4 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/","url":"https:\/\/www.vpascode.com\/pl\/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\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-xy-chart-syntax-configuration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pl\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Dokumentacja sk\u0142adni i konfiguracji wykresu XY w Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pl\/#website","url":"https:\/\/www.vpascode.com\/pl\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pl\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs\/2086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/media?parent=2086"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}