[{"data":1,"prerenderedAt":1288},["ShallowReactive",2],{"navigation_docs":3,"-components-composables":284,"-components-composables-surround":1283},[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":275,"body":286,"description":1276,"extension":1277,"links":1278,"meta":1279,"navigation":1280,"path":276,"seo":1281,"stem":277,"__hash__":1282},"docs\u002F4.components\u002F12.composables.md",{"type":287,"value":288,"toc":1268},"minimark",[289,298,303,306,312,718,784,788,866,870,956,959,986,1140,1149,1152,1228,1241,1245,1264],[290,291,292,293,297],"p",{},"The composables give your own components read access to a chart: its size, its plot area, its axes and its tooltip state. Use them to draw overlays, such as target bands, annotations or a custom readout, without the deprecated ",[294,295,296],"code",{},"\u003CCustomized>"," wrapper.",[299,300,302],"h2",{"id":301},"draw-an-overlay","Draw an overlay",[290,304,305],{},"Call the composables in a component that you place inside the chart. Children of a chart render inside its SVG surface, so the component returns SVG elements.",[307,308],"chart-demo",{"description":309,"name":310,"src":311},"usePlotArea and useYAxisScale place a band between two data values. useActiveTooltipLabel adds the hovered month.","Target Band","guide-charts\u002Fcomposables-overlay-chart",[313,314,320],"pre",{"className":315,"code":316,"filename":317,"language":318,"meta":319,"style":319},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { usePlotArea, useYAxisScale } from 'vccs'\n\nconst props = defineProps\u003C{ from: number, to: number }>()\nconst plot = usePlotArea()\nconst y = useYAxisScale()\nconst top = computed(() => y.value?.(props.to))\nconst bottom = computed(() => y.value?.(props.from))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Crect\n    v-if=\"top != null && bottom != null\"\n    :x=\"plot.x\"\n    :y=\"top\"\n    :width=\"plot.width\"\n    :height=\"bottom - top\"\n    fill=\"#14b8a6\"\n    opacity=\"0.12\"\n  \u002F>\n\u003C\u002Ftemplate>\n","TargetBand.vue","vue","",[294,321,322,357,385,412,419,461,475,489,530,563,573,578,588,597,613,628,643,658,673,688,703,709],{"__ignoreMap":319},[323,324,327,331,335,339,342,345,348,352,354],"span",{"class":325,"line":326},"line",1,[323,328,330],{"class":329},"sMK4o","\u003C",[323,332,334],{"class":333},"swJcz","script",[323,336,338],{"class":337},"spNyl"," setup",[323,340,341],{"class":337}," lang",[323,343,344],{"class":329},"=",[323,346,347],{"class":329},"\"",[323,349,351],{"class":350},"sfazB","ts",[323,353,347],{"class":329},[323,355,356],{"class":329},">\n",[323,358,360,364,367,371,374,377,380,382],{"class":325,"line":359},2,[323,361,363],{"class":362},"s7zQu","import",[323,365,366],{"class":329}," {",[323,368,370],{"class":369},"sTEyZ"," computed",[323,372,373],{"class":329}," }",[323,375,376],{"class":362}," from",[323,378,379],{"class":329}," '",[323,381,318],{"class":350},[323,383,384],{"class":329},"'\n",[323,386,388,390,392,395,398,401,403,405,407,410],{"class":325,"line":387},3,[323,389,363],{"class":362},[323,391,366],{"class":329},[323,393,394],{"class":369}," usePlotArea",[323,396,397],{"class":329},",",[323,399,400],{"class":369}," useYAxisScale",[323,402,373],{"class":329},[323,404,376],{"class":362},[323,406,379],{"class":329},[323,408,409],{"class":350},"vccs",[323,411,384],{"class":329},[323,413,415],{"class":325,"line":414},4,[323,416,418],{"emptyLinePlaceholder":417},true,"\n",[323,420,422,425,428,430,434,437,439,442,446,448,451,453,455,458],{"class":325,"line":421},5,[323,423,424],{"class":337},"const",[323,426,427],{"class":369}," props ",[323,429,344],{"class":329},[323,431,433],{"class":432},"s2Zo4"," defineProps",[323,435,436],{"class":329},"\u003C{",[323,438,376],{"class":333},[323,440,441],{"class":329},":",[323,443,445],{"class":444},"sBMFI"," number",[323,447,397],{"class":329},[323,449,450],{"class":333}," to",[323,452,441],{"class":329},[323,454,445],{"class":444},[323,456,457],{"class":329}," }>",[323,459,460],{"class":369},"()\n",[323,462,464,466,469,471,473],{"class":325,"line":463},6,[323,465,424],{"class":337},[323,467,468],{"class":369}," plot ",[323,470,344],{"class":329},[323,472,394],{"class":432},[323,474,460],{"class":369},[323,476,478,480,483,485,487],{"class":325,"line":477},7,[323,479,424],{"class":337},[323,481,482],{"class":369}," y ",[323,484,344],{"class":329},[323,486,400],{"class":432},[323,488,460],{"class":369},[323,490,492,494,497,499,501,504,507,510,513,516,519,522,525,527],{"class":325,"line":491},8,[323,493,424],{"class":337},[323,495,496],{"class":369}," top ",[323,498,344],{"class":329},[323,500,370],{"class":432},[323,502,503],{"class":369},"(",[323,505,506],{"class":329},"()",[323,508,509],{"class":337}," =>",[323,511,512],{"class":369}," y",[323,514,515],{"class":329},".",[323,517,518],{"class":432},"value",[323,520,521],{"class":329},"?.",[323,523,524],{"class":369},"(props",[323,526,515],{"class":329},[323,528,529],{"class":369},"to))\n",[323,531,533,535,538,540,542,544,546,548,550,552,554,556,558,560],{"class":325,"line":532},9,[323,534,424],{"class":337},[323,536,537],{"class":369}," bottom ",[323,539,344],{"class":329},[323,541,370],{"class":432},[323,543,503],{"class":369},[323,545,506],{"class":329},[323,547,509],{"class":337},[323,549,512],{"class":369},[323,551,515],{"class":329},[323,553,518],{"class":432},[323,555,521],{"class":329},[323,557,524],{"class":369},[323,559,515],{"class":329},[323,561,562],{"class":369},"from))\n",[323,564,566,569,571],{"class":325,"line":565},10,[323,567,568],{"class":329},"\u003C\u002F",[323,570,334],{"class":333},[323,572,356],{"class":329},[323,574,576],{"class":325,"line":575},11,[323,577,418],{"emptyLinePlaceholder":417},[323,579,581,583,586],{"class":325,"line":580},12,[323,582,330],{"class":329},[323,584,585],{"class":333},"template",[323,587,356],{"class":329},[323,589,591,594],{"class":325,"line":590},13,[323,592,593],{"class":329},"  \u003C",[323,595,596],{"class":333},"rect\n",[323,598,600,603,605,607,610],{"class":325,"line":599},14,[323,601,602],{"class":337},"    v-if",[323,604,344],{"class":329},[323,606,347],{"class":329},[323,608,609],{"class":350},"top != null && bottom != null",[323,611,612],{"class":329},"\"\n",[323,614,616,619,621,623,626],{"class":325,"line":615},15,[323,617,618],{"class":337},"    :x",[323,620,344],{"class":329},[323,622,347],{"class":329},[323,624,625],{"class":350},"plot.x",[323,627,612],{"class":329},[323,629,631,634,636,638,641],{"class":325,"line":630},16,[323,632,633],{"class":337},"    :y",[323,635,344],{"class":329},[323,637,347],{"class":329},[323,639,640],{"class":350},"top",[323,642,612],{"class":329},[323,644,646,649,651,653,656],{"class":325,"line":645},17,[323,647,648],{"class":337},"    :width",[323,650,344],{"class":329},[323,652,347],{"class":329},[323,654,655],{"class":350},"plot.width",[323,657,612],{"class":329},[323,659,661,664,666,668,671],{"class":325,"line":660},18,[323,662,663],{"class":337},"    :height",[323,665,344],{"class":329},[323,667,347],{"class":329},[323,669,670],{"class":350},"bottom - top",[323,672,612],{"class":329},[323,674,676,679,681,683,686],{"class":325,"line":675},19,[323,677,678],{"class":337},"    fill",[323,680,344],{"class":329},[323,682,347],{"class":329},[323,684,685],{"class":350},"#14b8a6",[323,687,612],{"class":329},[323,689,691,694,696,698,701],{"class":325,"line":690},20,[323,692,693],{"class":337},"    opacity",[323,695,344],{"class":329},[323,697,347],{"class":329},[323,699,700],{"class":350},"0.12",[323,702,612],{"class":329},[323,704,706],{"class":325,"line":705},21,[323,707,708],{"class":329},"  \u002F>\n",[323,710,712,714,716],{"class":325,"line":711},22,[323,713,568],{"class":329},[323,715,585],{"class":333},[323,717,356],{"class":329},[313,719,721],{"className":315,"code":720,"language":318,"meta":319,"style":319},"\u003CLineChart :data=\"data\" :height=\"300\">\n  \u003CYAxis \u002F>\n  \u003CTargetBand :from=\"250\" :to=\"320\" \u002F>\n  \u003CLine data-key=\"visits\" \u002F>\n\u003C\u002FLineChart>\n",[294,722,723,761,766,771,776],{"__ignoreMap":319},[323,724,725,727,730,733,736,738,740,742,744,746,749,751,753,757,759],{"class":325,"line":326},[323,726,330],{"class":329},[323,728,729],{"class":333},"LineChart",[323,731,732],{"class":329}," :",[323,734,735],{"class":337},"data",[323,737,344],{"class":329},[323,739,347],{"class":329},[323,741,735],{"class":369},[323,743,347],{"class":329},[323,745,732],{"class":329},[323,747,748],{"class":337},"height",[323,750,344],{"class":329},[323,752,347],{"class":329},[323,754,756],{"class":755},"sbssI","300",[323,758,347],{"class":329},[323,760,356],{"class":329},[323,762,763],{"class":325,"line":359},[323,764,765],{"class":369},"  \u003CYAxis \u002F>\n",[323,767,768],{"class":325,"line":387},[323,769,770],{"class":369},"  \u003CTargetBand :from=\"250\" :to=\"320\" \u002F>\n",[323,772,773],{"class":325,"line":414},[323,774,775],{"class":369},"  \u003CLine data-key=\"visits\" \u002F>\n",[323,777,778,780,782],{"class":325,"line":421},[323,779,568],{"class":329},[323,781,729],{"class":333},[323,783,356],{"class":329},[299,785,787],{"id":786},"where-they-work","Where they work",[789,790,791,804,827,852],"ul",{},[792,793,794,795,798,799,803],"li",{},"Call them in ",[294,796,797],{},"setup"," of a component that renders ",[800,801,802],"strong",{},"inside a chart",". Outside a chart they throw an error.",[792,805,806,807,810,811,813,814,813,817,813,820,813,823,826],{},"The axis composables need a ",[800,808,809],{},"cartesian chart"," (",[294,812,729],{},", ",[294,815,816],{},"BarChart",[294,818,819],{},"AreaChart",[294,821,822],{},"ScatterChart",[294,824,825],{},"ComposedChart","). In a polar chart they return an empty domain and no useful scale.",[792,828,829,832,833,813,836,839,840,843,844,847,848,851],{},[800,830,831],{},"Standalone charts"," (Treemap, Sankey, SunburstChart, Heatmap, CalendarHeatmap, CohortChart, Tracker, Sparkline, JourneySankey) have no axes: the axis composables throw there. ",[294,834,835],{},"usePlotArea",[294,837,838],{},"useChartWidth"," and ",[294,841,842],{},"useChartHeight"," report a width and height of ",[294,845,846],{},"0"," in these charts. Only the tooltip composables give useful values. ",[294,849,850],{},"BarList"," is an HTML list, not a chart surface: all composables throw inside it.",[792,853,854,855,858,859,862,863,865],{},"Every composable returns a Vue ",[294,856,857],{},"ComputedRef",". Read it with ",[294,860,861],{},".value"," in script, or without ",[294,864,861],{}," in a template.",[299,867,869],{"id":868},"layout","Layout",[871,872,873,889],"table",{},[874,875,876],"thead",{},[877,878,879,883,886],"tr",{},[880,881,882],"th",{},"Composable",[880,884,885],{},"Returns",[880,887,888],{},"Description",[890,891,892,908,923,937],"tbody",{},[877,893,894,900,905],{},[895,896,897],"td",{},[294,898,899],{},"usePlotArea()",[895,901,902],{},[294,903,904],{},"ComputedRef\u003C{ x, y, width, height }>",[895,906,907],{},"The area inside the margins, axes, legend and brush, where the series draw. In px from the top left of the chart",[877,909,910,915,920],{},[895,911,912],{},[294,913,914],{},"useChartWidth()",[895,916,917],{},[294,918,919],{},"ComputedRef\u003Cnumber>",[895,921,922],{},"Chart width in px",[877,924,925,930,934],{},[895,926,927],{},[294,928,929],{},"useChartHeight()",[895,931,932],{},[294,933,919],{},[895,935,936],{},"Chart height in px",[877,938,939,944,949],{},[895,940,941],{},[294,942,943],{},"useMargin()",[895,945,946],{},[294,947,948],{},"ComputedRef\u003C{ top, right, bottom, left }>",[895,950,951,952,955],{},"The chart ",[294,953,954],{},"margin"," prop, with defaults",[299,957,237],{"id":958},"axes",[290,960,961,962,813,965,839,968,971,972,974,975,978,979,982,983,985],{},"The types ",[294,963,964],{},"ScaleFunction",[294,966,967],{},"InverseScaleFunction",[294,969,970],{},"CartesianDataPoint"," are exported from ",[294,973,409],{},". Each axis composable takes an optional axis id (",[294,976,977],{},"x-axis-id"," or ",[294,980,981],{},"y-axis-id"," on the axis). The default is ",[294,984,846],{},", the id of an axis without one.",[871,987,988,998],{},[874,989,990],{},[877,991,992,994,996],{},[880,993,882],{},[880,995,885],{},[880,997,888],{},[890,999,1000,1023,1044,1066,1084,1101,1118],{},[877,1001,1002,1011,1016],{},[895,1003,1004,1007,1008],{},[294,1005,1006],{},"useXAxisDomain(id?)"," \u002F ",[294,1009,1010],{},"useYAxisDomain(id?)",[895,1012,1013],{},[294,1014,1015],{},"ComputedRef\u003C[number, number] | (number | string | Date)[] | undefined>",[895,1017,1018,1019,1022],{},"The final domain: ",[294,1020,1021],{},"[min, max]"," for a number axis, the categories for a category axis",[877,1024,1025,1033,1038],{},[895,1026,1027,1007,1030],{},[294,1028,1029],{},"useXAxisTicks(id?)",[294,1031,1032],{},"useYAxisTicks(id?)",[895,1034,1035],{},[294,1036,1037],{},"ComputedRef\u003C{ value, coordinate, index?, offset? }[] | undefined>",[895,1039,1040,1041],{},"The ticks the axis draws, with their pixel ",[294,1042,1043],{},"coordinate",[877,1045,1046,1054,1059],{},[895,1047,1048,1007,1051],{},[294,1049,1050],{},"useXAxisScale(id?)",[294,1052,1053],{},"useYAxisScale(id?)",[895,1055,1056],{},[294,1057,1058],{},"ComputedRef\u003C((value: unknown) => number | undefined) | undefined>",[895,1060,1061,1062,1065],{},"Maps a data value to a pixel position. The function returns ",[294,1063,1064],{},"undefined"," for a value outside a category axis",[877,1067,1068,1076,1081],{},[895,1069,1070,1007,1073],{},[294,1071,1072],{},"useXAxisInverseScale(id?)",[294,1074,1075],{},"useYAxisInverseScale(id?)",[895,1077,1078],{},[294,1079,1080],{},"ComputedRef\u003C((px: number) => unknown) | undefined>",[895,1082,1083],{},"Maps a pixel position back to a data value",[877,1085,1086,1094,1098],{},[895,1087,1088,1007,1091],{},[294,1089,1090],{},"useXAxisInverseDataSnapScale(id?)",[294,1092,1093],{},"useYAxisInverseDataSnapScale(id?)",[895,1095,1096],{},[294,1097,1080],{},[895,1099,1100],{},"Like the inverse scale, but returns the nearest value in the data",[877,1102,1103,1111,1115],{},[895,1104,1105,1007,1108],{},[294,1106,1107],{},"useXAxisInverseTickSnapScale(id?)",[294,1109,1110],{},"useYAxisInverseTickSnapScale(id?)",[895,1112,1113],{},[294,1114,1080],{},[895,1116,1117],{},"Like the inverse scale, but returns the value of the nearest tick",[877,1119,1120,1125,1130],{},[895,1121,1122],{},[294,1123,1124],{},"useCartesianScale(point, xId?, yId?)",[895,1126,1127],{},[294,1128,1129],{},"ComputedRef\u003C{ x, y } | undefined>",[895,1131,1132,1133,1136,1137,1139],{},"Maps a data point ",[294,1134,1135],{},"{ x, y }"," to pixels with both scales. ",[294,1138,1064],{}," when a scale or a value is missing",[290,1141,1142,1143,1145,1146,515],{},"The results are ",[294,1144,1064],{}," until the axis exists and has data. Always guard them, as the example above does with ",[294,1147,1148],{},"y.value?.(…)",[299,1150,223],{"id":1151},"tooltip",[871,1153,1154,1164],{},[874,1155,1156],{},[877,1157,1158,1160,1162],{},[880,1159,882],{},[880,1161,885],{},[880,1163,888],{},[890,1165,1166,1184,1199,1213],{},[877,1167,1168,1173,1178],{},[895,1169,1170],{},[294,1171,1172],{},"useIsTooltipActive()",[895,1174,1175],{},[294,1176,1177],{},"ComputedRef\u003Cboolean>",[895,1179,1180,1183],{},[294,1181,1182],{},"true"," while a tooltip shows, from pointer or keyboard",[877,1185,1186,1191,1196],{},[895,1187,1188],{},[294,1189,1190],{},"useActiveTooltipLabel()",[895,1192,1193],{},[294,1194,1195],{},"ComputedRef\u003Cstring | undefined>",[895,1197,1198],{},"The label of the active item, for example the category on the X axis",[877,1200,1201,1206,1210],{},[895,1202,1203],{},[294,1204,1205],{},"useActiveTooltipCoordinate()",[895,1207,1208],{},[294,1209,1129],{},[895,1211,1212],{},"The pixel position of the active item",[877,1214,1215,1220,1225],{},[895,1216,1217],{},[294,1218,1219],{},"useActiveTooltipDataPoints()",[895,1221,1222],{},[294,1223,1224],{},"ComputedRef\u003Cunknown[]>",[895,1226,1227],{},"The data rows of the active item, one per row, without duplicates. Empty when no tooltip shows",[290,1229,1230,1231,839,1234,1237,1238,515],{},"The tooltip composables also work in standalone charts. They follow the same selection as ",[294,1232,1233],{},"\u003CTooltip>",[294,1235,1236],{},"v-model:active-index","; see ",[1239,1240,88],"a",{"href":89},[299,1242,1244],{"id":1243},"related","Related",[789,1246,1247,1252,1257],{},[792,1248,1249,1251],{},[1239,1250,58],{"href":59},": domain, pixel and polar coordinates",[792,1253,1254,1256],{},[1239,1255,251],{"href":252},": lines, dots and areas at data positions, with no code",[792,1258,1259,1261,1262],{},[1239,1260,280],{"href":281},": step-by-step overlays, and how to replace the deprecated ",[294,1263,296],{},[1265,1266,1267],"style",{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":319,"searchDepth":359,"depth":359,"links":1269},[1270,1271,1272,1273,1274,1275],{"id":301,"depth":359,"text":302},{"id":786,"depth":359,"text":787},{"id":868,"depth":359,"text":869},{"id":958,"depth":359,"text":237},{"id":1151,"depth":359,"text":223},{"id":1243,"depth":359,"text":1244},"Read chart size, axis scales and tooltip state from your own components","md",null,{},{"icon":278},{"title":275,"description":1276},"_Ude7etC3b_QOoVTlvqyiqbNKzyBjnqgGmsUwPawW3k",[1284,1286],{"title":270,"path":271,"stem":272,"description":1285,"icon":273,"children":-1},"SVG building blocks for custom bars, points, sectors and cursors",{"title":280,"path":281,"stem":282,"description":1287,"icon":283,"children":-1},"Draw your own SVG inside a chart with the default slot and the chart composables",1793527171598]