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