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