[{"data":1,"prerenderedAt":454},["ShallowReactive",2],{"navigation_docs":3,"-guides-z-order-and-layers":172,"-guides-z-order-and-layers-surround":449},[4,21,77,132],{"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],{"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},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":99,"path":100,"stem":101,"icon":102},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":104,"path":105,"stem":106,"icon":107},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":109,"path":110,"stem":111,"icon":112},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":114,"path":115,"stem":116,"icon":117},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":119,"path":120,"stem":121,"icon":122},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":124,"path":125,"stem":126,"icon":127},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":129,"path":130,"stem":131,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":20},"Components","i-lucide-code","/components","4.components",[138,143,148,153,158,162,167],{"title":139,"path":140,"stem":141,"icon":142},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":144,"path":145,"stem":146,"icon":147},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":149,"path":150,"stem":151,"icon":152},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":154,"path":155,"stem":156,"icon":157},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":159,"path":160,"stem":161,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":163,"path":164,"stem":165,"icon":166},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":168,"path":169,"stem":170,"icon":171},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":173,"title":53,"body":174,"description":442,"extension":443,"links":444,"meta":445,"navigation":446,"path":54,"seo":447,"stem":55,"__hash__":448},"docs/2.guides/06.z-order-and-layers.md",{"type":175,"value":176,"toc":437},"minimark",[177,186,191,194,260,264,279,315,324,328,331,337,409,427,433],[178,179,180,181,185],"p",{},"SVG elements don't support CSS ",[182,183,184],"code",{},"z-index",". Instead, rendering order is determined by document order — elements rendered later appear on top. vccs manages this with a layer system.",[187,188,190],"h2",{"id":189},"default-rendering-order","Default rendering order",[178,192,193],{},"Chart elements are rendered in this order (bottom to top):",[195,196,197,204,214,220,226,232,238,245,248,254],"ol",{},[198,199,200,203],"li",{},[182,201,202],{},"\u003CCartesianGrid>"," — grid lines (background)",[198,205,206,209,210,213],{},[182,207,208],{},"\u003CReferenceArea>"," / ",[182,211,212],{},"\u003CReferenceLine>"," — reference markers",[198,215,216,219],{},[182,217,218],{},"\u003CArea>"," — filled area regions",[198,221,222,225],{},[182,223,224],{},"\u003CBar>"," — bar rectangles",[198,227,228,231],{},[182,229,230],{},"\u003CLine>"," — line curves",[198,233,234,237],{},[182,235,236],{},"\u003CScatter>"," — scatter dots",[198,239,240,241,244],{},"Labels (",[182,242,243],{},"\u003CLabelList>",")",[198,246,247],{},"Tooltip cursor",[198,249,250,253],{},[182,251,252],{},"\u003CTooltip>"," — tooltip (HTML overlay, above SVG)",[198,255,256,259],{},[182,257,258],{},"\u003CLegend>"," — legend (HTML)",[187,261,263],{"id":262},"teleport-layer-system","Teleport layer system",[178,265,266,267,270,271,274,275,278],{},"vccs uses Vue's ",[182,268,269],{},"\u003CTeleport>"," to enforce consistent layering. The ",[182,272,273],{},"\u003CSurface>"," component creates three SVG ",[182,276,277],{},"\u003Cg>"," layer refs:",[280,281,282,300,309],"ul",{},[198,283,284,288,289,292,293,292,296,299],{},[285,286,287],"strong",{},"Graphical layer"," — where ",[182,290,291],{},"Area",", ",[182,294,295],{},"Line",[182,297,298],{},"Radar"," render their paths",[198,301,302,288,305,308],{},[285,303,304],{},"Label layer",[182,306,307],{},"LabelList"," renders labels",[198,310,311,314],{},[285,312,313],{},"Cursor layer"," — where tooltip cursors render",[178,316,317,318,320,321,323],{},"Components like ",[182,319,218],{}," and ",[182,322,230],{}," teleport their output into the graphical layer, ensuring they render in the correct z-order regardless of where they appear in your template.",[187,325,327],{"id":326},"controlling-overlap","Controlling overlap",[178,329,330],{},"When elements overlap, the rendering order above determines which appears on top. To change the visual stacking:",[178,332,333,336],{},[285,334,335],{},"Reorder in template",": Components rendered later in your template appear on top within the same layer:",[338,339,344],"pre",{"className":340,"code":341,"language":342,"meta":343,"style":343},"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","",[182,345,346,355,387,393,399],{"__ignoreMap":343},[347,348,351],"span",{"class":349,"line":350},"line",1,[347,352,354],{"class":353},"sHwdD","\u003C!-- Area renders behind Line -->\n",[347,356,358,362,366,369,373,376,379,382,384],{"class":349,"line":357},2,[347,359,361],{"class":360},"sMK4o","\u003C",[347,363,365],{"class":364},"swJcz","ComposedChart",[347,367,368],{"class":360}," :",[347,370,372],{"class":371},"spNyl","data",[347,374,375],{"class":360},"=",[347,377,378],{"class":360},"\"",[347,380,372],{"class":381},"sTEyZ",[347,383,378],{"class":360},[347,385,386],{"class":360},">\n",[347,388,390],{"class":349,"line":389},3,[347,391,392],{"class":381},"  \u003CArea data-key=\"area\" fill=\"#14b8a6\" :fill-opacity=\"0.3\" />\n",[347,394,396],{"class":349,"line":395},4,[347,397,398],{"class":381},"  \u003CLine data-key=\"line\" stroke=\"#f97316\" />\n",[347,400,402,405,407],{"class":349,"line":401},5,[347,403,404],{"class":360},"\u003C/",[347,406,365],{"class":364},[347,408,386],{"class":360},[178,410,411,414,415,418,419,292,421,423,424,426],{},[285,412,413],{},"Use ComposedChart for mixed types",": ",[182,416,417],{},"\u003CComposedChart>"," lets you combine ",[182,420,218],{},[182,422,224],{},", and ",[182,425,230],{}," in a single chart with explicit ordering:",[428,429],"chart-demo",{"description":430,"name":431,"src":432},"Area renders behind Bar, which renders behind Line.","ComposedChart Layers","composed-charts/simple-composed-chart",[434,435,436],"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":343,"searchDepth":357,"depth":357,"links":438},[439,440,441],{"id":189,"depth":357,"text":190},{"id":262,"depth":357,"text":263},{"id":326,"depth":357,"text":327},"Understand and control the rendering order of chart elements","md",null,{},{"icon":56},{"title":53,"description":442},"DQMHTAOC-i5JFq4x-RmRHK_ucWY5i5vuSZcqVHjvcDg",[450,452],{"title":48,"path":49,"stem":50,"description":451,"icon":51,"children":-1},"Control chart dimensions with explicit sizing or responsive containers",{"title":58,"path":59,"stem":60,"description":453,"icon":61,"children":-1},"Understand domain, pixel, and polar coordinate systems in charts",1775472912789]