[{"data":1,"prerenderedAt":573},["ShallowReactive",2],{"navigation_docs":3,"-guides-coordinate-systems":177,"-guides-coordinate-systems-surround":568},[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":58,"body":179,"description":561,"extension":562,"links":563,"meta":564,"navigation":565,"path":59,"seo":566,"stem":60,"__hash__":567},"docs/2.guides/07.coordinate-systems.md",{"type":180,"value":181,"toc":555},"minimark",[182,186,191,208,329,333,344,414,418,424,430,452,538,542,545,551],[183,184,185],"p",{},"vccs uses different coordinate systems for different purposes. Understanding them helps when placing annotations, custom elements, or interpreting event data.",[187,188,190],"h2",{"id":189},"domain-coordinates","Domain coordinates",[183,192,193,194,198,199,203,204,207],{},"Domain coordinates are your ",[195,196,197],"strong",{},"data values",". When you set ",[200,201,202],"code",{},"domain={[0, 100]}"," on a YAxis, you're working in domain coordinates. Components like ",[200,205,206],{},"\u003CReferenceLine>"," accept domain coordinates:",[209,210,215],"pre",{"className":211,"code":212,"language":213,"meta":214,"style":214},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Draw a horizontal line at y=75 in data space -->\n\u003CReferenceLine :y=\"75\" stroke=\"#ef4444\" stroke-dasharray=\"3 3\" />\n\n\u003C!-- Draw a vertical line at a specific category -->\n\u003CReferenceLine x=\"March\" stroke=\"#14b8a6\" />\n","vue","",[200,216,217,226,284,291,297],{"__ignoreMap":214},[218,219,222],"span",{"class":220,"line":221},"line",1,[218,223,225],{"class":224},"sHwdD","\u003C!-- Draw a horizontal line at y=75 in data space -->\n",[218,227,229,233,237,240,244,247,250,254,256,259,261,263,267,269,272,274,276,279,281],{"class":220,"line":228},2,[218,230,232],{"class":231},"sMK4o","\u003C",[218,234,236],{"class":235},"swJcz","ReferenceLine",[218,238,239],{"class":231}," :",[218,241,243],{"class":242},"spNyl","y",[218,245,246],{"class":231},"=",[218,248,249],{"class":231},"\"",[218,251,253],{"class":252},"sbssI","75",[218,255,249],{"class":231},[218,257,258],{"class":242}," stroke",[218,260,246],{"class":231},[218,262,249],{"class":231},[218,264,266],{"class":265},"sfazB","#ef4444",[218,268,249],{"class":231},[218,270,271],{"class":242}," stroke-dasharray",[218,273,246],{"class":231},[218,275,249],{"class":231},[218,277,278],{"class":265},"3 3",[218,280,249],{"class":231},[218,282,283],{"class":231}," />\n",[218,285,287],{"class":220,"line":286},3,[218,288,290],{"emptyLinePlaceholder":289},true,"\n",[218,292,294],{"class":220,"line":293},4,[218,295,296],{"class":224},"\u003C!-- Draw a vertical line at a specific category -->\n",[218,298,300,302,304,307,309,311,314,316,318,320,322,325,327],{"class":220,"line":299},5,[218,301,232],{"class":231},[218,303,236],{"class":235},[218,305,306],{"class":242}," x",[218,308,246],{"class":231},[218,310,249],{"class":231},[218,312,313],{"class":265},"March",[218,315,249],{"class":231},[218,317,258],{"class":242},[218,319,246],{"class":231},[218,321,249],{"class":231},[218,323,324],{"class":265},"#14b8a6",[218,326,249],{"class":231},[218,328,283],{"class":231},[187,330,332],{"id":331},"pixel-coordinates","Pixel coordinates",[183,334,335,336,339,340,343],{},"Pixel coordinates are relative to the chart's drawing area. The top-left corner of the chart area (inside margins) is ",[200,337,338],{},"(0, 0)",". These are used internally for positioning and by ",[200,341,342],{},"\u003CReferenceArea>",":",[209,345,347],{"className":211,"code":346,"language":213,"meta":214,"style":214},"\u003CReferenceArea :x1=\"'Feb'\" :x2=\"'Apr'\" fill=\"#f97316\" :fill-opacity=\"0.1\" />\n",[200,348,349],{"__ignoreMap":214},[218,350,351,353,356,358,361,363,366,369,372,374,377,379,381,384,386,389,391,393,396,398,400,403,405,407,410,412],{"class":220,"line":221},[218,352,232],{"class":231},[218,354,355],{"class":235},"ReferenceArea",[218,357,239],{"class":231},[218,359,360],{"class":242},"x1",[218,362,246],{"class":231},[218,364,365],{"class":231},"\"'",[218,367,368],{"class":265},"Feb",[218,370,371],{"class":231},"'\"",[218,373,239],{"class":231},[218,375,376],{"class":242},"x2",[218,378,246],{"class":231},[218,380,365],{"class":231},[218,382,383],{"class":265},"Apr",[218,385,371],{"class":231},[218,387,388],{"class":242}," fill",[218,390,246],{"class":231},[218,392,249],{"class":231},[218,394,395],{"class":265},"#f97316",[218,397,249],{"class":231},[218,399,239],{"class":231},[218,401,402],{"class":242},"fill-opacity",[218,404,246],{"class":231},[218,406,249],{"class":231},[218,408,409],{"class":252},"0.1",[218,411,249],{"class":231},[218,413,283],{"class":231},[187,415,417],{"id":416},"cartesian-vs-polar","Cartesian vs Polar",[183,419,420,423],{},[195,421,422],{},"Cartesian charts"," (BarChart, LineChart, AreaChart, ScatterChart, ComposedChart) use X/Y axes with rectangular coordinate grids.",[183,425,426,429],{},[195,427,428],{},"Polar charts"," (PieChart, RadarChart, RadialBarChart) use angle/radius with circular coordinate systems:",[431,432,433,440,446],"ul",{},[434,435,436,439],"li",{},[200,437,438],{},"\u003CPolarAngleAxis>"," — maps data to angles around the circle",[434,441,442,445],{},[200,443,444],{},"\u003CPolarRadiusAxis>"," — maps data to distance from center",[434,447,448,451],{},[200,449,450],{},"\u003CPolarGrid>"," — renders circular or polygon grid lines",[209,453,455],{"className":211,"code":454,"language":213,"meta":214,"style":214},"\u003CRadarChart :data=\"data\" :cx=\"'50%'\" :cy=\"'50%'\">\n  \u003CPolarGrid />\n  \u003CPolarAngleAxis data-key=\"subject\" />\n  \u003CPolarRadiusAxis />\n  \u003CRadar data-key=\"score\" stroke=\"#f97316\" fill=\"#f97316\" :fill-opacity=\"0.5\" />\n\u003C/RadarChart>\n",[200,456,457,508,513,518,523,528],{"__ignoreMap":214},[218,458,459,461,464,466,469,471,473,476,478,480,483,485,487,490,492,494,497,499,501,503,505],{"class":220,"line":221},[218,460,232],{"class":231},[218,462,463],{"class":235},"RadarChart",[218,465,239],{"class":231},[218,467,468],{"class":242},"data",[218,470,246],{"class":231},[218,472,249],{"class":231},[218,474,468],{"class":475},"sTEyZ",[218,477,249],{"class":231},[218,479,239],{"class":231},[218,481,482],{"class":242},"cx",[218,484,246],{"class":231},[218,486,365],{"class":231},[218,488,489],{"class":265},"50%",[218,491,371],{"class":231},[218,493,239],{"class":231},[218,495,496],{"class":242},"cy",[218,498,246],{"class":231},[218,500,365],{"class":231},[218,502,489],{"class":265},[218,504,371],{"class":231},[218,506,507],{"class":231},">\n",[218,509,510],{"class":220,"line":228},[218,511,512],{"class":475},"  \u003CPolarGrid />\n",[218,514,515],{"class":220,"line":286},[218,516,517],{"class":475},"  \u003CPolarAngleAxis data-key=\"subject\" />\n",[218,519,520],{"class":220,"line":293},[218,521,522],{"class":475},"  \u003CPolarRadiusAxis />\n",[218,524,525],{"class":220,"line":299},[218,526,527],{"class":475},"  \u003CRadar data-key=\"score\" stroke=\"#f97316\" fill=\"#f97316\" :fill-opacity=\"0.5\" />\n",[218,529,531,534,536],{"class":220,"line":530},6,[218,532,533],{"class":231},"\u003C/",[218,535,463],{"class":235},[218,537,507],{"class":231},[187,539,541],{"id":540},"annotations-with-referencearea-and-referenceline","Annotations with ReferenceArea and ReferenceLine",[183,543,544],{},"Use these components to annotate charts with domain coordinates:",[546,547],"chart-demo",{"description":548,"name":549,"src":550},"Line chart with ReferenceArea highlight and ReferenceLine threshold.","Reference Annotations","guide-charts/reference-line-chart",[552,553,554],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":214,"searchDepth":228,"depth":228,"links":556},[557,558,559,560],{"id":189,"depth":228,"text":190},{"id":331,"depth":228,"text":332},{"id":416,"depth":228,"text":417},{"id":540,"depth":228,"text":541},"Understand domain, pixel, and polar coordinate systems in charts","md",null,{},{"icon":61},{"title":58,"description":561},"89eqClhZ5YLPIfo3kZCeXVYeYa7ueVvBovLoM4_b6KM",[569,571],{"title":53,"path":54,"stem":55,"description":570,"icon":56,"children":-1},"Understand and control the rendering order of chart elements",{"title":63,"path":64,"stem":65,"description":572,"icon":66,"children":-1},"Optimize chart rendering for large datasets and complex visualizations",1775929453605]