[{"data":1,"prerenderedAt":1021},["ShallowReactive",2],{"navigation_docs":3,"-guides-coordinate-systems":279,"-guides-coordinate-systems-surround":1016},[4,26,112,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Migrate from 0.6","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F3.migration","i-lucide-arrow-up-circle",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[32,37,42,47,52,57,62,67,72,77,82,87,92,97,102,107],{"title":33,"path":34,"stem":35,"icon":36},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":38,"path":39,"stem":40,"icon":41},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":48,"path":49,"stem":50,"icon":51},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":53,"path":54,"stem":55,"icon":56},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":58,"path":59,"stem":60,"icon":61},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":63,"path":64,"stem":65,"icon":66},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":68,"path":69,"stem":70,"icon":71},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":73,"path":74,"stem":75,"icon":76},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":78,"path":79,"stem":80,"icon":81},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":83,"path":84,"stem":85,"icon":86},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":88,"path":89,"stem":90,"icon":91},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":93,"path":94,"stem":95,"icon":96},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":98,"path":99,"stem":100,"icon":101},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":103,"path":104,"stem":105,"icon":106},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":108,"path":109,"stem":110,"icon":111},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":113,"icon":114,"path":115,"stem":116,"children":117,"page":25},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[118,123,128,133,138,143,148,153,158,163,167,172,177,182,187,192,197,201,206],{"title":119,"path":120,"stem":121,"icon":122},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":124,"path":125,"stem":126,"icon":127},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":129,"path":130,"stem":131,"icon":132},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":134,"path":135,"stem":136,"icon":137},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":139,"path":140,"stem":141,"icon":142},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":144,"path":145,"stem":146,"icon":147},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":149,"path":150,"stem":151,"icon":152},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":154,"path":155,"stem":156,"icon":157},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":159,"path":160,"stem":161,"icon":162},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":164,"path":165,"stem":166,"icon":51},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":168,"path":169,"stem":170,"icon":171},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":173,"path":174,"stem":175,"icon":176},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":178,"path":179,"stem":180,"icon":181},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":183,"path":184,"stem":185,"icon":186},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":188,"path":189,"stem":190,"icon":191},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":193,"path":194,"stem":195,"icon":196},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":198,"path":199,"stem":200,"icon":137},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":202,"path":203,"stem":204,"icon":205},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":207,"path":208,"stem":209,"icon":210},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":25},"Components","i-lucide-code","\u002Fcomponents","4.components",[217,222,227,231,236,240,245,249,254,259,264,269,274],{"title":218,"path":219,"stem":220,"icon":221},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":223,"path":224,"stem":225,"icon":226},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":228,"path":229,"stem":230,"icon":196},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":232,"path":233,"stem":234,"icon":235},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":237,"path":238,"stem":239,"icon":147},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":241,"path":242,"stem":243,"icon":244},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":246,"path":247,"stem":248,"icon":56},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":250,"path":251,"stem":252,"icon":253},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":255,"path":256,"stem":257,"icon":258},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":260,"path":261,"stem":262,"icon":263},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":265,"path":266,"stem":267,"icon":268},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":270,"path":271,"stem":272,"icon":273},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":275,"path":276,"stem":277,"icon":278},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":280,"title":53,"body":281,"description":1009,"extension":1010,"links":1011,"meta":1012,"navigation":1013,"path":54,"seo":1014,"stem":55,"__hash__":1015},"docs\u002F2.guides\u002F07.coordinate-systems.md",{"type":282,"value":283,"toc":1002},"minimark",[284,288,293,306,557,561,568,829,843,847,853,859,881,959,965,969,972,978,982,998],[285,286,287],"p",{},"vccs uses different coordinate systems for different purposes. Understanding them helps when placing annotations, custom elements, or interpreting event data.",[289,290,292],"h2",{"id":291},"data-values","Data values",[285,294,295,296,300,301,305],{},"Axes, reference elements and series take ",[297,298,299],"strong",{},"data values",": the values in your rows. When you set\n",[302,303,304],"code",{},":domain=\"[0, 100]\""," on a YAxis, the axis covers the data values 0 to 100. Every reference\nelement takes data values too:",[307,308,313],"pre",{"className":309,"code":310,"language":311,"meta":312,"style":312},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- A horizontal line at the data value 75 -->\n\u003CReferenceLine :y=\"75\" stroke=\"#ef4444\" stroke-dasharray=\"3 3\" \u002F>\n\n\u003C!-- A vertical line at a category -->\n\u003CReferenceLine x=\"March\" stroke=\"#14b8a6\" \u002F>\n\n\u003C!-- A band from one category to another -->\n\u003CReferenceArea x1=\"Feb\" x2=\"Apr\" fill=\"#f97316\" :fill-opacity=\"0.1\" \u002F>\n\n\u003C!-- A dot at one data point -->\n\u003CReferenceDot x=\"Mar\" :y=\"600\" :r=\"6\" \u002F>\n","vue","",[302,314,315,324,382,389,395,427,432,438,498,503,509],{"__ignoreMap":312},[316,317,320],"span",{"class":318,"line":319},"line",1,[316,321,323],{"class":322},"sHwdD","\u003C!-- A horizontal line at the data value 75 -->\n",[316,325,327,331,335,338,342,345,348,352,354,357,359,361,365,367,370,372,374,377,379],{"class":318,"line":326},2,[316,328,330],{"class":329},"sMK4o","\u003C",[316,332,334],{"class":333},"swJcz","ReferenceLine",[316,336,337],{"class":329}," :",[316,339,341],{"class":340},"spNyl","y",[316,343,344],{"class":329},"=",[316,346,347],{"class":329},"\"",[316,349,351],{"class":350},"sbssI","75",[316,353,347],{"class":329},[316,355,356],{"class":340}," stroke",[316,358,344],{"class":329},[316,360,347],{"class":329},[316,362,364],{"class":363},"sfazB","#ef4444",[316,366,347],{"class":329},[316,368,369],{"class":340}," stroke-dasharray",[316,371,344],{"class":329},[316,373,347],{"class":329},[316,375,376],{"class":363},"3 3",[316,378,347],{"class":329},[316,380,381],{"class":329}," \u002F>\n",[316,383,385],{"class":318,"line":384},3,[316,386,388],{"emptyLinePlaceholder":387},true,"\n",[316,390,392],{"class":318,"line":391},4,[316,393,394],{"class":322},"\u003C!-- A vertical line at a category -->\n",[316,396,398,400,402,405,407,409,412,414,416,418,420,423,425],{"class":318,"line":397},5,[316,399,330],{"class":329},[316,401,334],{"class":333},[316,403,404],{"class":340}," x",[316,406,344],{"class":329},[316,408,347],{"class":329},[316,410,411],{"class":363},"March",[316,413,347],{"class":329},[316,415,356],{"class":340},[316,417,344],{"class":329},[316,419,347],{"class":329},[316,421,422],{"class":363},"#14b8a6",[316,424,347],{"class":329},[316,426,381],{"class":329},[316,428,430],{"class":318,"line":429},6,[316,431,388],{"emptyLinePlaceholder":387},[316,433,435],{"class":318,"line":434},7,[316,436,437],{"class":322},"\u003C!-- A band from one category to another -->\n",[316,439,441,443,446,449,451,453,456,458,461,463,465,468,470,473,475,477,480,482,484,487,489,491,494,496],{"class":318,"line":440},8,[316,442,330],{"class":329},[316,444,445],{"class":333},"ReferenceArea",[316,447,448],{"class":340}," x1",[316,450,344],{"class":329},[316,452,347],{"class":329},[316,454,455],{"class":363},"Feb",[316,457,347],{"class":329},[316,459,460],{"class":340}," x2",[316,462,344],{"class":329},[316,464,347],{"class":329},[316,466,467],{"class":363},"Apr",[316,469,347],{"class":329},[316,471,472],{"class":340}," fill",[316,474,344],{"class":329},[316,476,347],{"class":329},[316,478,479],{"class":363},"#f97316",[316,481,347],{"class":329},[316,483,337],{"class":329},[316,485,486],{"class":340},"fill-opacity",[316,488,344],{"class":329},[316,490,347],{"class":329},[316,492,493],{"class":350},"0.1",[316,495,347],{"class":329},[316,497,381],{"class":329},[316,499,501],{"class":318,"line":500},9,[316,502,388],{"emptyLinePlaceholder":387},[316,504,506],{"class":318,"line":505},10,[316,507,508],{"class":322},"\u003C!-- A dot at one data point -->\n",[316,510,512,514,517,519,521,523,526,528,530,532,534,536,539,541,543,546,548,550,553,555],{"class":318,"line":511},11,[316,513,330],{"class":329},[316,515,516],{"class":333},"ReferenceDot",[316,518,404],{"class":340},[316,520,344],{"class":329},[316,522,347],{"class":329},[316,524,525],{"class":363},"Mar",[316,527,347],{"class":329},[316,529,337],{"class":329},[316,531,341],{"class":340},[316,533,344],{"class":329},[316,535,347],{"class":329},[316,537,538],{"class":350},"600",[316,540,347],{"class":329},[316,542,337],{"class":329},[316,544,545],{"class":340},"r",[316,547,344],{"class":329},[316,549,347],{"class":329},[316,551,552],{"class":350},"6",[316,554,347],{"class":329},[316,556,381],{"class":329},[289,558,560],{"id":559},"data-values-to-pixels","Data values to pixels",[285,562,563,564,567],{},"The chart converts data values to pixels inside the SVG. The origin ",[302,565,566],{},"(0, 0)"," is the top-left\ncorner of the SVG; the plot area starts after the margin and the axes. To draw your own SVG at\na data value, read the scales in a component placed in the chart's default slot:",[307,569,572],{"className":309,"code":570,"filename":571,"language":311,"meta":312,"style":312},"\u003Cscript setup lang=\"ts\">\nimport { useCartesianScale, usePlotArea } from 'vccs'\n\nconst point = useCartesianScale({ x: 'Mar', y: 600 })\nconst plot = usePlotArea()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cline\n    v-if=\"point\"\n    :x1=\"point.x\"\n    :x2=\"point.x\"\n    :y1=\"plot.y\"\n    :y2=\"plot.y + plot.height\"\n    stroke=\"#14b8a6\"\n  \u002F>\n\u003C\u002Ftemplate>\n","Marker.vue",[302,573,574,599,633,637,683,697,706,710,719,727,742,756,770,785,800,814,820],{"__ignoreMap":312},[316,575,576,578,581,584,587,589,591,594,596],{"class":318,"line":319},[316,577,330],{"class":329},[316,579,580],{"class":333},"script",[316,582,583],{"class":340}," setup",[316,585,586],{"class":340}," lang",[316,588,344],{"class":329},[316,590,347],{"class":329},[316,592,593],{"class":363},"ts",[316,595,347],{"class":329},[316,597,598],{"class":329},">\n",[316,600,601,605,608,612,615,618,621,624,627,630],{"class":318,"line":326},[316,602,604],{"class":603},"s7zQu","import",[316,606,607],{"class":329}," {",[316,609,611],{"class":610},"sTEyZ"," useCartesianScale",[316,613,614],{"class":329},",",[316,616,617],{"class":610}," usePlotArea",[316,619,620],{"class":329}," }",[316,622,623],{"class":603}," from",[316,625,626],{"class":329}," '",[316,628,629],{"class":363},"vccs",[316,631,632],{"class":329},"'\n",[316,634,635],{"class":318,"line":384},[316,636,388],{"emptyLinePlaceholder":387},[316,638,639,642,645,647,650,653,656,658,661,663,665,668,670,673,675,678,680],{"class":318,"line":391},[316,640,641],{"class":340},"const",[316,643,644],{"class":610}," point ",[316,646,344],{"class":329},[316,648,611],{"class":649},"s2Zo4",[316,651,652],{"class":610},"(",[316,654,655],{"class":329},"{",[316,657,404],{"class":333},[316,659,660],{"class":329},":",[316,662,626],{"class":329},[316,664,525],{"class":363},[316,666,667],{"class":329},"'",[316,669,614],{"class":329},[316,671,672],{"class":333}," y",[316,674,660],{"class":329},[316,676,677],{"class":350}," 600",[316,679,620],{"class":329},[316,681,682],{"class":610},")\n",[316,684,685,687,690,692,694],{"class":318,"line":397},[316,686,641],{"class":340},[316,688,689],{"class":610}," plot ",[316,691,344],{"class":329},[316,693,617],{"class":649},[316,695,696],{"class":610},"()\n",[316,698,699,702,704],{"class":318,"line":429},[316,700,701],{"class":329},"\u003C\u002F",[316,703,580],{"class":333},[316,705,598],{"class":329},[316,707,708],{"class":318,"line":434},[316,709,388],{"emptyLinePlaceholder":387},[316,711,712,714,717],{"class":318,"line":440},[316,713,330],{"class":329},[316,715,716],{"class":333},"template",[316,718,598],{"class":329},[316,720,721,724],{"class":318,"line":500},[316,722,723],{"class":329},"  \u003C",[316,725,726],{"class":333},"line\n",[316,728,729,732,734,736,739],{"class":318,"line":505},[316,730,731],{"class":340},"    v-if",[316,733,344],{"class":329},[316,735,347],{"class":329},[316,737,738],{"class":363},"point",[316,740,741],{"class":329},"\"\n",[316,743,744,747,749,751,754],{"class":318,"line":511},[316,745,746],{"class":340},"    :x1",[316,748,344],{"class":329},[316,750,347],{"class":329},[316,752,753],{"class":363},"point.x",[316,755,741],{"class":329},[316,757,759,762,764,766,768],{"class":318,"line":758},12,[316,760,761],{"class":340},"    :x2",[316,763,344],{"class":329},[316,765,347],{"class":329},[316,767,753],{"class":363},[316,769,741],{"class":329},[316,771,773,776,778,780,783],{"class":318,"line":772},13,[316,774,775],{"class":340},"    :y1",[316,777,344],{"class":329},[316,779,347],{"class":329},[316,781,782],{"class":363},"plot.y",[316,784,741],{"class":329},[316,786,788,791,793,795,798],{"class":318,"line":787},14,[316,789,790],{"class":340},"    :y2",[316,792,344],{"class":329},[316,794,347],{"class":329},[316,796,797],{"class":363},"plot.y + plot.height",[316,799,741],{"class":329},[316,801,803,806,808,810,812],{"class":318,"line":802},15,[316,804,805],{"class":340},"    stroke",[316,807,344],{"class":329},[316,809,347],{"class":329},[316,811,422],{"class":363},[316,813,741],{"class":329},[316,815,817],{"class":318,"line":816},16,[316,818,819],{"class":329},"  \u002F>\n",[316,821,823,825,827],{"class":318,"line":822},17,[316,824,701],{"class":329},[316,826,716],{"class":333},[316,828,598],{"class":329},[285,830,831,834,835,838,839,842],{},[302,832,833],{},"useXAxisScale()"," and ",[302,836,837],{},"useYAxisScale()"," return the scale functions, and the inverse scales map a\npixel back to a data value. ",[840,841,275],"a",{"href":276}," lists every\ncomposable.",[289,844,846],{"id":845},"cartesian-vs-polar","Cartesian vs Polar",[285,848,849,852],{},[297,850,851],{},"Cartesian charts"," (BarChart, LineChart, AreaChart, ScatterChart, ComposedChart) use X\u002FY axes with rectangular coordinate grids.",[285,854,855,858],{},[297,856,857],{},"Polar charts"," (PieChart, RadarChart, RadialBarChart) use angle\u002Fradius with circular coordinate systems:",[860,861,862,869,875],"ul",{},[863,864,865,868],"li",{},[302,866,867],{},"\u003CPolarAngleAxis>"," — maps data to angles around the circle",[863,870,871,874],{},[302,872,873],{},"\u003CPolarRadiusAxis>"," — maps data to distance from center",[863,876,877,880],{},[302,878,879],{},"\u003CPolarGrid>"," — renders circular or polygon grid lines",[307,882,884],{"className":309,"code":883,"language":311,"meta":312,"style":312},"\u003CRadarChart :data=\"data\" cx=\"50%\" cy=\"50%\">\n  \u003CPolarGrid \u002F>\n  \u003CPolarAngleAxis data-key=\"subject\" \u002F>\n  \u003CPolarRadiusAxis \u002F>\n  \u003CRadar data-key=\"score\" stroke=\"#f97316\" fill=\"#f97316\" :fill-opacity=\"0.5\" \u002F>\n\u003C\u002FRadarChart>\n",[302,885,886,931,936,941,946,951],{"__ignoreMap":312},[316,887,888,890,893,895,898,900,902,904,906,909,911,913,916,918,921,923,925,927,929],{"class":318,"line":319},[316,889,330],{"class":329},[316,891,892],{"class":333},"RadarChart",[316,894,337],{"class":329},[316,896,897],{"class":340},"data",[316,899,344],{"class":329},[316,901,347],{"class":329},[316,903,897],{"class":610},[316,905,347],{"class":329},[316,907,908],{"class":340}," cx",[316,910,344],{"class":329},[316,912,347],{"class":329},[316,914,915],{"class":363},"50%",[316,917,347],{"class":329},[316,919,920],{"class":340}," cy",[316,922,344],{"class":329},[316,924,347],{"class":329},[316,926,915],{"class":363},[316,928,347],{"class":329},[316,930,598],{"class":329},[316,932,933],{"class":318,"line":326},[316,934,935],{"class":610},"  \u003CPolarGrid \u002F>\n",[316,937,938],{"class":318,"line":384},[316,939,940],{"class":610},"  \u003CPolarAngleAxis data-key=\"subject\" \u002F>\n",[316,942,943],{"class":318,"line":391},[316,944,945],{"class":610},"  \u003CPolarRadiusAxis \u002F>\n",[316,947,948],{"class":318,"line":397},[316,949,950],{"class":610},"  \u003CRadar data-key=\"score\" stroke=\"#f97316\" fill=\"#f97316\" :fill-opacity=\"0.5\" \u002F>\n",[316,952,953,955,957],{"class":318,"line":429},[316,954,701],{"class":329},[316,956,892],{"class":333},[316,958,598],{"class":329},[285,960,961,962,964],{},"See ",[840,963,237],{"href":238}," for all props of these three components.",[289,966,968],{"id":967},"annotations-with-referencearea-and-referenceline","Annotations with ReferenceArea and ReferenceLine",[285,970,971],{},"Reference elements annotate a chart in data values:",[973,974],"chart-demo",{"description":975,"name":976,"src":977},"Line chart with ReferenceArea highlight and ReferenceLine threshold.","Reference Annotations","guide-charts\u002Freference-line-chart",[289,979,981],{"id":980},"convert-between-coordinates-in-code","Convert between coordinates in code",[285,983,984,985,988,989,834,991,993,994,997],{},"The ",[840,986,987],{"href":271},"composables"," give your components the axis scales of the chart. ",[302,990,833],{},[302,992,837],{}," map data values to pixels, the inverse scales map pixels back to data values, and ",[302,995,996],{},"usePlotArea()"," gives the pixel rectangle where the series draw.",[999,1000,1001],"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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":312,"searchDepth":326,"depth":326,"links":1003},[1004,1005,1006,1007,1008],{"id":291,"depth":326,"text":292},{"id":559,"depth":326,"text":560},{"id":845,"depth":326,"text":846},{"id":967,"depth":326,"text":968},{"id":980,"depth":326,"text":981},"Data values, pixels and polar coordinates in charts","md",null,{},{"icon":56},{"title":53,"description":1009},"bXRUHklGXLlxB8dfrxuNLKwVuSBsRxg6ec3b5MEOaUY",[1017,1019],{"title":48,"path":49,"stem":50,"description":1018,"icon":51,"children":-1},"The order in which chart elements paint, and how to change it",{"title":58,"path":59,"stem":60,"description":1020,"icon":61,"children":-1},"Optimize chart rendering for large datasets and complex visualizations",1791811109636]