[{"data":1,"prerenderedAt":459},["ShallowReactive",2],{"navigation_docs":3,"-guides-z-order-and-layers":177,"-guides-z-order-and-layers-surround":454},[4,21,77,137],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","/getting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guides","i-lucide-book-open","/guides","2.guides",[27,32,37,42,47,52,57,62,67,72],{"title":28,"path":29,"stem":30,"icon":31},"Customize","/guides/customize","2.guides/01.customize","i-lucide-paintbrush",{"title":33,"path":34,"stem":35,"icon":36},"Active Index","/guides/active-state","2.guides/02.active-state","i-lucide-mouse-pointer",{"title":38,"path":39,"stem":40,"icon":41},"Domain and Ticks","/guides/domain-and-ticks","2.guides/03.domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Axis Ticks","/guides/axis-ticks","2.guides/04.axis-ticks","i-lucide-hash",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","/guides/chart-size","2.guides/05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Index and Layers","/guides/z-order-and-layers","2.guides/06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","/guides/coordinate-systems","2.guides/07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","/guides/performance","2.guides/08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","/guides/rounded-bar-corners","2.guides/09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","/guides/bar-alignment","2.guides/10.bar-alignment","i-lucide-align-center",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":20},"Charts","i-lucide-bar-chart-3","/charts","3.charts",[83,88,93,98,103,108,113,118,123,128,133],{"title":84,"path":85,"stem":86,"icon":87},"Area Chart","/charts/area-chart","3.charts/1.area-chart","i-lucide-area-chart",{"title":89,"path":90,"stem":91,"icon":92},"Treemap","/charts/treemap","3.charts/10.treemap","i-lucide-layout-grid",{"title":94,"path":95,"stem":96,"icon":97},"Sankey","/charts/sankey","3.charts/11.sankey","i-lucide-git-fork",{"title":99,"path":100,"stem":101,"icon":102},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":104,"path":105,"stem":106,"icon":107},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":109,"path":110,"stem":111,"icon":112},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":114,"path":115,"stem":116,"icon":117},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":119,"path":120,"stem":121,"icon":122},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":124,"path":125,"stem":126,"icon":127},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":129,"path":130,"stem":131,"icon":132},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":134,"path":135,"stem":136,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":20},"Components","i-lucide-code","/components","4.components",[143,148,153,158,163,167,172],{"title":144,"path":145,"stem":146,"icon":147},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":149,"path":150,"stem":151,"icon":152},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":154,"path":155,"stem":156,"icon":157},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":159,"path":160,"stem":161,"icon":162},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":164,"path":165,"stem":166,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":168,"path":169,"stem":170,"icon":171},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":173,"path":174,"stem":175,"icon":176},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":178,"title":53,"body":179,"description":447,"extension":448,"links":449,"meta":450,"navigation":451,"path":54,"seo":452,"stem":55,"__hash__":453},"docs/2.guides/06.z-order-and-layers.md",{"type":180,"value":181,"toc":442},"minimark",[182,191,196,199,265,269,284,320,329,333,336,342,414,432,438],[183,184,185,186,190],"p",{},"SVG elements don't support CSS ",[187,188,189],"code",{},"z-index",". Instead, rendering order is determined by document order — elements rendered later appear on top. vccs manages this with a layer system.",[192,193,195],"h2",{"id":194},"default-rendering-order","Default rendering order",[183,197,198],{},"Chart elements are rendered in this order (bottom to top):",[200,201,202,209,219,225,231,237,243,250,253,259],"ol",{},[203,204,205,208],"li",{},[187,206,207],{},"\u003CCartesianGrid>"," — grid lines (background)",[203,210,211,214,215,218],{},[187,212,213],{},"\u003CReferenceArea>"," / ",[187,216,217],{},"\u003CReferenceLine>"," — reference markers",[203,220,221,224],{},[187,222,223],{},"\u003CArea>"," — filled area regions",[203,226,227,230],{},[187,228,229],{},"\u003CBar>"," — bar rectangles",[203,232,233,236],{},[187,234,235],{},"\u003CLine>"," — line curves",[203,238,239,242],{},[187,240,241],{},"\u003CScatter>"," — scatter dots",[203,244,245,246,249],{},"Labels (",[187,247,248],{},"\u003CLabelList>",")",[203,251,252],{},"Tooltip cursor",[203,254,255,258],{},[187,256,257],{},"\u003CTooltip>"," — tooltip (HTML overlay, above SVG)",[203,260,261,264],{},[187,262,263],{},"\u003CLegend>"," — legend (HTML)",[192,266,268],{"id":267},"teleport-layer-system","Teleport layer system",[183,270,271,272,275,276,279,280,283],{},"vccs uses Vue's ",[187,273,274],{},"\u003CTeleport>"," to enforce consistent layering. The ",[187,277,278],{},"\u003CSurface>"," component creates three SVG ",[187,281,282],{},"\u003Cg>"," layer refs:",[285,286,287,305,314],"ul",{},[203,288,289,293,294,297,298,297,301,304],{},[290,291,292],"strong",{},"Graphical layer"," — where ",[187,295,296],{},"Area",", ",[187,299,300],{},"Line",[187,302,303],{},"Radar"," render their paths",[203,306,307,293,310,313],{},[290,308,309],{},"Label layer",[187,311,312],{},"LabelList"," renders labels",[203,315,316,319],{},[290,317,318],{},"Cursor layer"," — where tooltip cursors render",[183,321,322,323,325,326,328],{},"Components like ",[187,324,223],{}," and ",[187,327,235],{}," teleport their output into the graphical layer, ensuring they render in the correct z-order regardless of where they appear in your template.",[192,330,332],{"id":331},"controlling-overlap","Controlling overlap",[183,334,335],{},"When elements overlap, the rendering order above determines which appears on top. To change the visual stacking:",[183,337,338,341],{},[290,339,340],{},"Reorder in template",": Components rendered later in your template appear on top within the same layer:",[343,344,349],"pre",{"className":345,"code":346,"language":347,"meta":348,"style":348},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Area renders behind Line -->\n\u003CComposedChart :data=\"data\">\n  \u003CArea data-key=\"area\" fill=\"#14b8a6\" :fill-opacity=\"0.3\" />\n  \u003CLine data-key=\"line\" stroke=\"#f97316\" />\n\u003C/ComposedChart>\n","vue","",[187,350,351,360,392,398,404],{"__ignoreMap":348},[352,353,356],"span",{"class":354,"line":355},"line",1,[352,357,359],{"class":358},"sHwdD","\u003C!-- Area renders behind Line -->\n",[352,361,363,367,371,374,378,381,384,387,389],{"class":354,"line":362},2,[352,364,366],{"class":365},"sMK4o","\u003C",[352,368,370],{"class":369},"swJcz","ComposedChart",[352,372,373],{"class":365}," :",[352,375,377],{"class":376},"spNyl","data",[352,379,380],{"class":365},"=",[352,382,383],{"class":365},"\"",[352,385,377],{"class":386},"sTEyZ",[352,388,383],{"class":365},[352,390,391],{"class":365},">\n",[352,393,395],{"class":354,"line":394},3,[352,396,397],{"class":386},"  \u003CArea data-key=\"area\" fill=\"#14b8a6\" :fill-opacity=\"0.3\" />\n",[352,399,401],{"class":354,"line":400},4,[352,402,403],{"class":386},"  \u003CLine data-key=\"line\" stroke=\"#f97316\" />\n",[352,405,407,410,412],{"class":354,"line":406},5,[352,408,409],{"class":365},"\u003C/",[352,411,370],{"class":369},[352,413,391],{"class":365},[183,415,416,419,420,423,424,297,426,428,429,431],{},[290,417,418],{},"Use ComposedChart for mixed types",": ",[187,421,422],{},"\u003CComposedChart>"," lets you combine ",[187,425,223],{},[187,427,229],{},", and ",[187,430,235],{}," in a single chart with explicit ordering:",[433,434],"chart-demo",{"description":435,"name":436,"src":437},"Area renders behind Bar, which renders behind Line.","ComposedChart Layers","composed-charts/simple-composed-chart",[439,440,441],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":348,"searchDepth":362,"depth":362,"links":443},[444,445,446],{"id":194,"depth":362,"text":195},{"id":267,"depth":362,"text":268},{"id":331,"depth":362,"text":332},"Understand and control the rendering order of chart elements","md",null,{},{"icon":56},{"title":53,"description":447},"DQMHTAOC-i5JFq4x-RmRHK_ucWY5i5vuSZcqVHjvcDg",[455,457],{"title":48,"path":49,"stem":50,"description":456,"icon":51,"children":-1},"Control chart dimensions with explicit sizing or responsive containers",{"title":58,"path":59,"stem":60,"description":458,"icon":61,"children":-1},"Understand domain, pixel, and polar coordinate systems in charts",1775929453605]