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