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