[{"data":1,"prerenderedAt":1544},["ShallowReactive",2],{"navigation_docs":3,"-components-labels":284,"-components-labels-surround":1539},[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":260,"body":286,"description":1532,"extension":1533,"links":1534,"meta":1535,"navigation":1536,"path":261,"seo":1537,"stem":262,"__hash__":1538},"docs\u002F4.components\u002F09.labels.md",{"type":287,"value":288,"toc":1519},"minimark",[289,305,310,320,326,396,402,407,451,456,689,716,720,759,831,834,844,849,913,926,930,1107,1133,1137,1172,1175,1178,1277,1280,1348,1352,1357,1362,1399,1419,1479,1482,1486,1515],[290,291,292,296,297,300,301,304],"p",{},[293,294,295],"code",{},"\u003CLabel>"," draws one text at a position in the chart. ",[293,298,299],{},"\u003CLabelList>"," draws one label per item of a series. ",[293,302,303],{},"\u003CCell>"," sets the color or other SVG attributes of one item in a series.",[306,307,309],"h2",{"id":308},"labellist","LabelList",[290,311,312,313,315,316,319],{},"Put a ",[293,314,299],{}," inside a series to label every bar, point or sector. Without ",[293,317,318],{},"data-key",", each label shows the item's value.",[321,322],"chart-demo",{"description":323,"name":324,"src":325},"Values above each bar.","Bar Labels","bar-charts\u002Flabel-bar-chart",[327,328,333],"pre",{"className":329,"code":330,"language":331,"meta":332,"style":332},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBar data-key=\"value\" fill=\"#f97316\">\n  \u003CLabelList position=\"top\" :offset=\"12\" \u002F>\n\u003C\u002FBar>\n","vue","",[293,334,335,379,386],{"__ignoreMap":332},[336,337,340,344,348,352,355,358,362,364,367,369,371,374,376],"span",{"class":338,"line":339},"line",1,[336,341,343],{"class":342},"sMK4o","\u003C",[336,345,347],{"class":346},"swJcz","Bar",[336,349,351],{"class":350},"spNyl"," data-key",[336,353,354],{"class":342},"=",[336,356,357],{"class":342},"\"",[336,359,361],{"class":360},"sfazB","value",[336,363,357],{"class":342},[336,365,366],{"class":350}," fill",[336,368,354],{"class":342},[336,370,357],{"class":342},[336,372,373],{"class":360},"#f97316",[336,375,357],{"class":342},[336,377,378],{"class":342},">\n",[336,380,382],{"class":338,"line":381},2,[336,383,385],{"class":384},"sTEyZ","  \u003CLabelList position=\"top\" :offset=\"12\" \u002F>\n",[336,387,389,392,394],{"class":338,"line":388},3,[336,390,391],{"class":342},"\u003C\u002F",[336,393,347],{"class":346},[336,395,378],{"class":342},[290,397,398,399,401],{},"Use ",[293,400,318],{}," to show another field of the row, for example a name inside radial bars:",[321,403],{"description":404,"name":405,"src":406},"Browser names at the start of each bar.","Radial Bar Labels","radial-charts\u002Flabel-radial-chart",[290,408,409,411,412,414,415,414,418,414,421,424,425,428,429,424,432,435,436,439,440,443,444,447,448,450],{},[293,410,299],{}," works as a child of ",[293,413,347],{},", ",[293,416,417],{},"Line",[293,419,420],{},"Funnel",[293,422,423],{},"Radar"," and ",[293,426,427],{},"RadialBar",". ",[293,430,431],{},"Area",[293,433,434],{},"Pie"," take a ",[293,437,438],{},"label"," prop and a ",[293,441,442],{},"#label"," slot instead, and ",[293,445,446],{},"Scatter"," takes a ",[293,449,438],{}," prop; see their chart pages.",[452,453,455],"h3",{"id":454},"labellist-props","LabelList props",[457,458,459,478],"table",{},[460,461,462],"thead",{},[463,464,465,469,472,475],"tr",{},[466,467,468],"th",{},"Prop",[466,470,471],{},"Type",[466,473,474],{},"Default",[466,476,477],{},"Description",[479,480,481,503,522,548,569,589,605,625,651,671],"tbody",{},[463,482,483,488,493,496],{},[484,485,486],"td",{},[293,487,318],{},[484,489,490],{},[293,491,492],{},"string | (row) => unknown",[484,494,495],{},"—",[484,497,498,499,502],{},"Field of the row to show. Without it, ",[293,500,501],{},"value-accessor"," picks the text",[463,504,505,509,514,517],{},[484,506,507],{},[293,508,501],{},[484,510,511],{},[293,512,513],{},"(entry, index) => string | number",[484,515,516],{},"the item value (last value of a range)",[484,518,519,520],{},"Picks the text when there is no ",[293,521,318],{},[463,523,524,529,534,536],{},[484,525,526],{},[293,527,528],{},"position",[484,530,531],{},[293,532,533],{},"LabelPosition",[484,535,495],{},[484,537,538,539,542,543],{},"Where the label sits relative to each item: a name or ",[293,540,541],{},"{ x, y }",". See ",[544,545,547],"a",{"href":546},"#positions","Positions",[463,549,550,555,560,562],{},[484,551,552],{},[293,553,554],{},"formatter",[484,556,557],{},[293,558,559],{},"(value: unknown) => string | number | undefined",[484,561,495],{},[484,563,564,565,568],{},"Writes the label text. Receives the raw value, also ",[293,566,567],{},"null"," or an object",[463,570,571,576,581,586],{},[484,572,573],{},[293,574,575],{},"offset",[484,577,578],{},[293,579,580],{},"number",[484,582,583],{},[293,584,585],{},"5",[484,587,588],{},"Distance from the item in px",[463,590,591,596,600,602],{},[484,592,593],{},[293,594,595],{},"angle",[484,597,598],{},[293,599,580],{},[484,601,495],{},[484,603,604],{},"Rotation in degrees",[463,606,607,612,617,622],{},[484,608,609],{},[293,610,611],{},"text-break-all",[484,613,614],{},[293,615,616],{},"boolean",[484,618,619],{},[293,620,621],{},"false",[484,623,624],{},"Break long text at any character",[463,626,627,632,636,638],{},[484,628,629],{},[293,630,631],{},"clock-wise",[484,633,634],{},[293,635,616],{},[484,637,495],{},[484,639,640,641,414,644,414,647,650],{},"Direction of text on a radial path (",[293,642,643],{},"insideStart",[293,645,646],{},"insideEnd",[293,648,649],{},"end",")",[463,652,653,658,663,665],{},[484,654,655],{},[293,656,657],{},"id",[484,659,660],{},[293,661,662],{},"string",[484,664,495],{},[484,666,667,668],{},"Base id. Each label gets ",[293,669,670],{},"${id}-${index}",[463,672,673,678,683,686],{},[484,674,675],{},[293,676,677],{},"data",[484,679,680],{},[293,681,682],{},"Data[]",[484,684,685],{},"from the series",[484,687,688],{},"Items to label. The series fills this; set it only to label your own geometry",[290,690,691,692,414,695,698,699,702,703,705,706,708,709,711,712,715],{},"Other attributes go to every label, for example ",[293,693,694],{},"fill",[293,696,697],{},"class"," or ",[293,700,701],{},"font-size",". Without a ",[293,704,554],{},", only text and numbers make a label; other values, such as ",[293,707,567],{}," or objects, show no label. With a ",[293,710,554],{},", its result decides: ",[293,713,714],{},"undefined"," shows no label.",[452,717,719],{"id":718},"labellist-slot","LabelList slot",[457,721,722,734],{},[460,723,724],{},[463,725,726,729,732],{},[466,727,728],{},"Slot",[466,730,731],{},"Props",[466,733,477],{},[479,735,736],{},[463,737,738,743,748],{},[484,739,740],{},[293,741,742],{},"#content",[484,744,745],{},[293,746,747],{},"{ x, y, width, height, value, index, formatter, ... }",[484,749,750,751,414,753,755,756,758],{},"Replaces each label. Receives the item geometry (cartesian or polar), the value, the index and the other props. With a ",[293,752,554],{},[293,754,361],{}," is the raw value and the slot calls ",[293,757,554],{}," itself",[327,760,762],{"className":329,"code":761,"language":331,"meta":332,"style":332},"\u003CBar data-key=\"value\">\n  \u003CLabelList>\n    \u003Ctemplate #content=\"{ x, y, width, value }\">\n      \u003Ctext :x=\"x + width \u002F 2\" :y=\"y - 8\" text-anchor=\"middle\" class=\"fill-(--color-foreground) text-xs\">\n        {{ value }}\n      \u003C\u002Ftext>\n    \u003C\u002Ftemplate>\n  \u003C\u002FLabelList>\n\u003C\u002FBar>\n",[293,763,764,782,787,792,798,804,810,816,822],{"__ignoreMap":332},[336,765,766,768,770,772,774,776,778,780],{"class":338,"line":339},[336,767,343],{"class":342},[336,769,347],{"class":346},[336,771,351],{"class":350},[336,773,354],{"class":342},[336,775,357],{"class":342},[336,777,361],{"class":360},[336,779,357],{"class":342},[336,781,378],{"class":342},[336,783,784],{"class":338,"line":381},[336,785,786],{"class":384},"  \u003CLabelList>\n",[336,788,789],{"class":338,"line":388},[336,790,791],{"class":384},"    \u003Ctemplate #content=\"{ x, y, width, value }\">\n",[336,793,795],{"class":338,"line":794},4,[336,796,797],{"class":384},"      \u003Ctext :x=\"x + width \u002F 2\" :y=\"y - 8\" text-anchor=\"middle\" class=\"fill-(--color-foreground) text-xs\">\n",[336,799,801],{"class":338,"line":800},5,[336,802,803],{"class":384},"        {{ value }}\n",[336,805,807],{"class":338,"line":806},6,[336,808,809],{"class":384},"      \u003C\u002Ftext>\n",[336,811,813],{"class":338,"line":812},7,[336,814,815],{"class":384},"    \u003C\u002Ftemplate>\n",[336,817,819],{"class":338,"line":818},8,[336,820,821],{"class":384},"  \u003C\u002FLabelList>\n",[336,823,825,827,829],{"class":338,"line":824},9,[336,826,391],{"class":342},[336,828,347],{"class":346},[336,830,378],{"class":342},[306,832,833],{"id":438},"Label",[290,835,836,837,839,840,843],{},"A ",[293,838,295],{}," inside a chart is placed in the plot area. Inside a series or a ",[293,841,842],{},"PolarRadiusAxis"," it uses that element's box. Use it for a center value in a donut or gauge:",[321,845],{"description":846,"name":847,"src":848},"The total in the hole of a donut.","Center Label","recipe-charts\u002Fdonut-center-value-chart",[327,850,852],{"className":329,"code":851,"language":331,"meta":332,"style":332},"\u003CPie :data=\"data\" data-key=\"value\" :inner-radius=\"70\">\n  \u003CLabel position=\"center\" :value=\"total\" class=\"fill-(--color-foreground) text-2xl font-semibold\" \u002F>\n\u003C\u002FPie>\n",[293,853,854,900,905],{"__ignoreMap":332},[336,855,856,858,860,863,865,867,869,871,873,875,877,879,881,883,885,888,890,892,896,898],{"class":338,"line":339},[336,857,343],{"class":342},[336,859,434],{"class":346},[336,861,862],{"class":342}," :",[336,864,677],{"class":350},[336,866,354],{"class":342},[336,868,357],{"class":342},[336,870,677],{"class":384},[336,872,357],{"class":342},[336,874,351],{"class":350},[336,876,354],{"class":342},[336,878,357],{"class":342},[336,880,361],{"class":360},[336,882,357],{"class":342},[336,884,862],{"class":342},[336,886,887],{"class":350},"inner-radius",[336,889,354],{"class":342},[336,891,357],{"class":342},[336,893,895],{"class":894},"sbssI","70",[336,897,357],{"class":342},[336,899,378],{"class":342},[336,901,902],{"class":338,"line":381},[336,903,904],{"class":384},"  \u003CLabel position=\"center\" :value=\"total\" class=\"fill-(--color-foreground) text-2xl font-semibold\" \u002F>\n",[336,906,907,909,911],{"class":338,"line":388},[336,908,391],{"class":342},[336,910,434],{"class":346},[336,912,378],{"class":342},[290,914,915,916,918,919,698,922,925],{},"Axes and reference elements create a Label for you through their ",[293,917,438],{}," prop, for example ",[293,920,921],{},"\u003CReferenceLine :y=\"80\" label=\"Target\" \u002F>",[293,923,924],{},"\u003CXAxis label=\"Month\" \u002F>",".",[452,927,929],{"id":928},"label-props","Label props",[457,931,932,944],{},[460,933,934],{},[463,935,936,938,940,942],{},[466,937,468],{},[466,939,471],{},[466,941,474],{},[466,943,477],{},[479,945,946,968,986,1003,1022,1043,1057,1073,1088],{},[463,947,948,952,957,959],{},[484,949,950],{},[293,951,361],{},[484,953,954],{},[293,955,956],{},"string | number",[484,958,495],{},[484,960,961,962,964,965,967],{},"Text to show. Without ",[293,963,361],{}," and without a ",[293,966,742],{}," slot, the label renders nothing",[463,969,970,974,978,981],{},[484,971,972],{},[293,973,528],{},[484,975,976],{},[293,977,533],{},[484,979,980],{},"center",[484,982,983,984],{},"Where the label sits. See ",[544,985,547],{"href":546},[463,987,988,992,996,1000],{},[484,989,990],{},[293,991,575],{},[484,993,994],{},[293,995,580],{},[484,997,998],{},[293,999,585],{},[484,1001,1002],{},"Distance from the reference edge in px",[463,1004,1005,1009,1014,1016],{},[484,1006,1007],{},[293,1008,554],{},[484,1010,1011],{},[293,1012,1013],{},"(value) => string | number | undefined",[484,1015,495],{},[484,1017,1018,1019,1021],{},"Formats ",[293,1020,361],{}," before it is drawn",[463,1023,1024,1029,1037,1040],{},[484,1025,1026],{},[293,1027,1028],{},"view-box",[484,1030,1031,698,1034],{},[293,1032,1033],{},"{ x, y, width, height }",[293,1035,1036],{},"{ cx, cy, innerRadius, outerRadius, startAngle, endAngle }",[484,1038,1039],{},"plot area",[484,1041,1042],{},"Box to place the label in",[463,1044,1045,1049,1053,1055],{},[484,1046,1047],{},[293,1048,595],{},[484,1050,1051],{},[293,1052,580],{},[484,1054,495],{},[484,1056,604],{},[463,1058,1059,1063,1067,1071],{},[484,1060,1061],{},[293,1062,611],{},[484,1064,1065],{},[293,1066,616],{},[484,1068,1069],{},[293,1070,621],{},[484,1072,624],{},[463,1074,1075,1079,1083,1085],{},[484,1076,1077],{},[293,1078,657],{},[484,1080,1081],{},[293,1082,662],{},[484,1084,495],{},[484,1086,1087],{},"Id of the text element",[463,1089,1090,1094,1099,1104],{},[484,1091,1092],{},[293,1093,697],{},[484,1095,1096],{},[293,1097,1098],{},"string | array | object",[484,1100,1101],{},[293,1102,1103],{},"''",[484,1105,1106],{},"Class on the text element",[290,1108,1109,1110,698,1112,1114,1115,1118,1119,1122,1123,1126,1127,1129,1130,1132],{},"Other attributes, such as ",[293,1111,694],{},[293,1113,701],{},", go to the SVG ",[293,1116,1117],{},"\u003Ctext>"," (",[293,1120,1121],{},"[data-slot=\"label\"]",", class ",[293,1124,1125],{},"v-charts-label","). In a ",[293,1128,309],{},", a label without its own ",[293,1131,694],{}," takes the fill of its item.",[452,1134,1136],{"id":1135},"label-slot","Label slot",[457,1138,1139,1149],{},[460,1140,1141],{},[463,1142,1143,1145,1147],{},[466,1144,728],{},[466,1146,731],{},[466,1148,477],{},[479,1150,1151],{},[463,1152,1153,1157,1163],{},[484,1154,1155],{},[293,1156,742],{},[484,1158,1159,1160],{},"Label props plus ",[293,1161,1162],{},"viewBox",[484,1164,1165,1166,1168,1169],{},"Replaces the text. ",[293,1167,1162],{}," is normalized: missing sizes and angles are ",[293,1170,1171],{},"0",[306,1173,547],{"id":1174},"positions",[290,1176,1177],{},"For cartesian boxes (bars, the plot area):",[457,1179,1180,1190],{},[460,1181,1182],{},[463,1183,1184,1187],{},[466,1185,1186],{},"Position",[466,1188,1189],{},"Place",[479,1191,1192,1211,1226,1245,1264],{},[463,1193,1194,1208],{},[484,1195,1196,414,1199,414,1202,414,1205],{},[293,1197,1198],{},"top",[293,1200,1201],{},"bottom",[293,1203,1204],{},"left",[293,1206,1207],{},"right",[484,1209,1210],{},"Outside the box, next to that edge",[463,1212,1213,1223],{},[484,1214,1215,414,1218,414,1220],{},[293,1216,1217],{},"inside",[293,1219,980],{},[293,1221,1222],{},"middle",[484,1224,1225],{},"At the center of the box",[463,1227,1228,1242],{},[484,1229,1230,414,1233,414,1236,414,1239],{},[293,1231,1232],{},"insideTop",[293,1234,1235],{},"insideBottom",[293,1237,1238],{},"insideLeft",[293,1240,1241],{},"insideRight",[484,1243,1244],{},"Inside the box, at that edge",[463,1246,1247,1261],{},[484,1248,1249,414,1252,414,1255,414,1258],{},[293,1250,1251],{},"insideTopLeft",[293,1253,1254],{},"insideTopRight",[293,1256,1257],{},"insideBottomLeft",[293,1259,1260],{},"insideBottomRight",[484,1262,1263],{},"Inside the box, at that corner",[463,1265,1266,1270],{},[484,1267,1268],{},[293,1269,541],{},[484,1271,1272,1273,1276],{},"At that point in the box. Numbers are px; strings such as ",[293,1274,1275],{},"'50%'"," are relative to the box",[290,1278,1279],{},"For polar boxes (sectors, radial bars):",[457,1281,1282,1290],{},[460,1283,1284],{},[463,1285,1286,1288],{},[466,1287,1186],{},[466,1289,1189],{},[479,1291,1292,1312,1322,1332],{},[463,1293,1294,1304],{},[484,1295,1296,414,1298,414,1301],{},[293,1297,980],{},[293,1299,1300],{},"centerTop",[293,1302,1303],{},"centerBottom",[484,1305,1306,1307,424,1309,1311],{},"At the center of the circle; ",[293,1308,1300],{},[293,1310,1303],{}," put the text below or above the center point",[463,1313,1314,1319],{},[484,1315,1316],{},[293,1317,1318],{},"outside",[484,1320,1321],{},"Outside the sector, at its middle angle",[463,1323,1324,1329],{},[484,1325,1326,1328],{},[293,1327,1217],{}," (default)",[484,1330,1331],{},"In the middle of the sector",[463,1333,1334,1342],{},[484,1335,1336,414,1338,414,1340],{},[293,1337,643],{},[293,1339,646],{},[293,1341,649],{},[484,1343,1344,1345,1347],{},"Along the arc at the start or end of the sector. Use ",[293,1346,631],{}," to set the text direction",[306,1349,1351],{"id":1350},"cell","Cell",[290,1353,1354,1356],{},[293,1355,303],{}," sets attributes for one item of a series. Put one Cell per row inside the series, in data order. The first Cell styles the first item, and so on.",[321,1358],{"description":1359,"name":1360,"src":1361},"A different fill per bar.","Cell Colors","guide-charts\u002Fcell-colors-chart",[327,1363,1365],{"className":329,"code":1364,"language":331,"meta":332,"style":332},"\u003CBar data-key=\"uv\">\n  \u003CCell v-for=\"(row, i) in data\" :key=\"row.name\" :fill=\"colors[i]\" \u002F>\n\u003C\u002FBar>\n",[293,1366,1367,1386,1391],{"__ignoreMap":332},[336,1368,1369,1371,1373,1375,1377,1379,1382,1384],{"class":338,"line":339},[336,1370,343],{"class":342},[336,1372,347],{"class":346},[336,1374,351],{"class":350},[336,1376,354],{"class":342},[336,1378,357],{"class":342},[336,1380,1381],{"class":360},"uv",[336,1383,357],{"class":342},[336,1385,378],{"class":342},[336,1387,1388],{"class":338,"line":381},[336,1389,1390],{"class":384},"  \u003CCell v-for=\"(row, i) in data\" :key=\"row.name\" :fill=\"colors[i]\" \u002F>\n",[336,1392,1393,1395,1397],{"class":338,"line":388},[336,1394,391],{"class":342},[336,1396,347],{"class":346},[336,1398,378],{"class":342},[290,1400,1401,1411,1412,698,1415,1418],{},[1402,1403,1404,1405,414,1407,424,1409,925],"strong",{},"Cell works only in ",[293,1406,347],{},[293,1408,434],{},[293,1410,420],{}," Other series ignore it; use their ",[293,1413,1414],{},"#shape",[293,1416,1417],{},"#dot"," slots to style single items.",[457,1420,1421,1431],{},[460,1422,1423],{},[463,1424,1425,1427,1429],{},[466,1426,468],{},[466,1428,471],{},[466,1430,477],{},[479,1432,1433,1446,1460],{},[463,1434,1435,1439,1443],{},[484,1436,1437],{},[293,1438,694],{},[484,1440,1441],{},[293,1442,662],{},[484,1444,1445],{},"Fill of the item. In Pie and Funnel, the legend, the tooltip swatch and the labels use this color too",[463,1447,1448,1453,1457],{},[484,1449,1450],{},[293,1451,1452],{},"stroke",[484,1454,1455],{},[293,1456,662],{},[484,1458,1459],{},"Stroke of the item",[463,1461,1462,1465,1467],{},[484,1463,1464],{},"any SVG attribute",[484,1466,495],{},[484,1468,1469,1470,414,1473,698,1476,1478],{},"For example ",[293,1471,1472],{},"opacity",[293,1474,1475],{},"stroke-width",[293,1477,697],{},". The series applies it to the item's shape",[290,1480,1481],{},"Cell renders nothing itself. To style the active item, use the series' active props or slots.",[306,1483,1485],{"id":1484},"related","Related",[1487,1488,1489,1495,1503,1509],"ul",{},[1490,1491,1492,1494],"li",{},[544,1493,265],{"href":266},": the SVG text component that labels use",[1490,1496,1497,1499,1500,1502],{},[544,1498,270],{"href":271},": draw your own items in ",[293,1501,1414],{}," slots",[1490,1504,1505,1508],{},[544,1506,1507],{"href":39},"Customize charts",": more styling options",[1490,1510,1511,1514],{},[544,1512,1513],{"href":99},"Theming",": text colors",[1516,1517,1518],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":332,"searchDepth":381,"depth":381,"links":1520},[1521,1525,1529,1530,1531],{"id":308,"depth":381,"text":309,"children":1522},[1523,1524],{"id":454,"depth":388,"text":455},{"id":718,"depth":388,"text":719},{"id":438,"depth":381,"text":833,"children":1526},[1527,1528],{"id":928,"depth":388,"text":929},{"id":1135,"depth":388,"text":1136},{"id":1174,"depth":381,"text":547},{"id":1350,"depth":381,"text":1351},{"id":1484,"depth":381,"text":1485},"Put text on charts and series, and style single items","md",null,{},{"icon":263},{"title":260,"description":1532},"1G8GZrWInHE-qeTipkVsY97LH5Y2OMvSVDuSqS3BqSE",[1540,1542],{"title":255,"path":256,"stem":257,"description":1541,"icon":258,"children":-1},"Show uncertainty ranges on bars and scatter points",{"title":265,"path":266,"stem":267,"description":1543,"icon":268,"children":-1},"Render SVG text with auto-wrapping, rotation, and scaling",1793527171074]