[{"data":1,"prerenderedAt":899},["ShallowReactive",2],{"navigation_docs":3,"-charts-radial-bar-chart":284,"-charts-radial-bar-chart-surround":894},[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":154,"body":286,"description":887,"extension":888,"links":889,"meta":890,"navigation":891,"path":155,"seo":892,"stem":156,"__hash__":893},"docs\u002F3.charts\u002F06.radial-bar-chart.md",{"type":287,"value":288,"toc":877},"minimark",[289,293,298,303,319,323,333,337,341,351,355,359,370,374,792,816,820,866],[290,291,292],"p",{},"Radial bar charts display data as concentric arcs, useful for progress indicators and circular comparisons.",[294,295,297],"h2",{"id":296},"simple-radial-bar-chart","Simple Radial Bar Chart",[299,300],"chart-demo",{"description":301,"name":297,"src":302},"A basic radial bar chart with background arcs.","radial-charts\u002Fsimple-radial-chart",[290,304,305,306,310,311,314,315,318],{},"The tooltip takes its label from the radius axis, which uses the row index by default. To name the bars, add a hidden ",[307,308,309],"code",{},"\u003CPolarRadiusAxis data-key=\"name\" type=\"category\" hide \u002F>","; ",[307,312,313],{},"name"," on ",[307,316,317],{},"\u003CRadialBar>"," sets the series name beside the value.",[294,320,322],{"id":321},"radial-bar-with-labels","Radial Bar with Labels",[290,324,325,326,329,330,332],{},"Place ",[307,327,328],{},"\u003CLabelList>"," as a child of ",[307,331,317],{}," to show labels inside arcs.",[299,334],{"description":335,"name":322,"src":336},"Radial bars with browser name labels inside.","radial-charts\u002Flabel-radial-chart",[294,338,340],{"id":339},"stacked-radial-bar","Stacked Radial Bar",[290,342,343,344,347,348,350],{},"Use ",[307,345,346],{},"stack-id"," on multiple ",[307,349,317],{}," components.",[299,352],{"description":353,"name":340,"src":354},"Two stacked radial bars for desktop and mobile.","radial-charts\u002Fstacked-radial-chart",[294,356,358],{"id":357},"radialbarchart-props","RadialBarChart props",[290,360,361,364,365,369],{},[307,362,363],{},"\u003CRadialBarChart>"," takes the ",[366,367,368],"a",{"href":125},"chart container props",", including bar sizing and the polar props.",[294,371,373],{"id":372},"radialbar-props","RadialBar props",[375,376,377,396],"table",{},[378,379,380],"thead",{},[381,382,383,387,390,393],"tr",{},[384,385,386],"th",{},"Prop",[384,388,389],{},"Type",[384,391,392],{},"Default",[384,394,395],{},"Description",[397,398,399,419,441,459,487,507,525,541,559,575,594,612,631,649,670,685,705,725,743,759,775],"tbody",{},[381,400,401,407,410,416],{},[402,403,404],"td",{},[307,405,406],{},"data-key",[402,408,409],{},"row path or accessor",[402,411,412],{},[413,414,415],"strong",{},"required",[402,417,418],{},"Field with the value",[381,420,421,426,431,434],{},[402,422,423],{},[307,424,425],{},"fill",[402,427,428],{},[307,429,430],{},"string",[402,432,433],{},"series palette per entry",[402,435,436,437,440],{},"Bar fill; ",[307,438,439],{},"\u003CCell>"," sets one bar",[381,442,443,448,453,456],{},[402,444,445],{},[307,446,447],{},"fill-opacity",[402,449,450],{},[307,451,452],{},"number",[402,454,455],{},"—",[402,457,458],{},"Fill opacity",[381,460,461,473,475,481],{},[402,462,463,466,467,466,470],{},[307,464,465],{},"stroke",", ",[307,468,469],{},"stroke-width",[307,471,472],{},"stroke-dasharray",[402,474],{},[402,476,477,478,480],{},"bar fill (",[307,479,465],{},")",[402,482,483,484,486],{},"Outline. Each bar sets its own stroke, so a CSS class on the series cannot override it; use the ",[307,485,465],{}," prop",[381,488,489,494,499,504],{},[402,490,491],{},[307,492,493],{},"background",[402,495,496],{},[307,497,498],{},"boolean | object",[402,500,501],{},[307,502,503],{},"false",[402,505,506],{},"Draw a background arc",[381,508,509,514,518,522],{},[402,510,511],{},[307,512,513],{},"label",[402,515,516],{},[307,517,498],{},[402,519,520],{},[307,521,503],{},[402,523,524],{},"Show a value label on every bar",[381,526,527,531,536,538],{},[402,528,529],{},[307,530,346],{},[402,532,533],{},[307,534,535],{},"string | number",[402,537,455],{},[402,539,540],{},"Bars with the same id stack",[381,542,543,548,553,556],{},[402,544,545],{},[307,546,547],{},"bar-size",[402,549,550],{},[307,551,552],{},"number | string",[402,554,555],{},"the chart's value",[402,557,558],{},"Bar thickness",[381,560,561,566,570,572],{},[402,562,563],{},[307,564,565],{},"max-bar-size",[402,567,568],{},[307,569,452],{},[402,571,555],{},[402,573,574],{},"Upper limit of the bar thickness",[381,576,577,582,586,591],{},[402,578,579],{},[307,580,581],{},"min-point-size",[402,583,584],{},[307,585,452],{},[402,587,588],{},[307,589,590],{},"0",[402,592,593],{},"Minimum arc length",[381,595,596,601,605,609],{},[402,597,598],{},[307,599,600],{},"corner-radius",[402,602,603],{},[307,604,552],{},[402,606,607],{},[307,608,590],{},[402,610,611],{},"Arc corner radius",[381,613,614,619,624,628],{},[402,615,616],{},[307,617,618],{},"force-corner-radius",[402,620,621],{},[307,622,623],{},"boolean",[402,625,626],{},[307,627,503],{},[402,629,630],{},"Round the corners of short arcs too",[381,632,633,638,642,646],{},[402,634,635],{},[307,636,637],{},"corner-is-external",[402,639,640],{},[307,641,623],{},[402,643,644],{},[307,645,503],{},[402,647,648],{},"Round the corners outward",[381,650,651,659,663,667],{},[402,652,653,466,656],{},[307,654,655],{},"angle-axis-id",[307,657,658],{},"radius-axis-id",[402,660,661],{},[307,662,535],{},[402,664,665],{},[307,666,590],{},[402,668,669],{},"Axes this series uses",[381,671,672,676,680,682],{},[402,673,674],{},[307,675,313],{},[402,677,678],{},[307,679,535],{},[402,681,455],{},[402,683,684],{},"Name in the legend and tooltip",[381,686,687,692,697,702],{},[402,688,689],{},[307,690,691],{},"legend-type",[402,693,694],{},[307,695,696],{},"LegendType",[402,698,699],{},[307,700,701],{},"'rect'",[402,703,704],{},"Legend icon",[381,706,707,712,717,719],{},[402,708,709],{},[307,710,711],{},"tooltip-type",[402,713,714],{},[307,715,716],{},"'none'",[402,718,455],{},[402,720,721,722,724],{},"Set ",[307,723,716],{}," to leave the series out of the tooltip",[381,726,727,732,736,740],{},[402,728,729],{},[307,730,731],{},"hide",[402,733,734],{},[307,735,623],{},[402,737,738],{},[307,739,503],{},[402,741,742],{},"Hide the series",[381,744,745,750,754,756],{},[402,746,747],{},[307,748,749],{},"class",[402,751,752],{},[307,753,430],{},[402,755,455],{},[402,757,758],{},"Class on the series layer",[381,760,761,766,770,772],{},[402,762,763],{},[307,764,765],{},"is-animation-active",[402,767,768],{},[307,769,623],{},[402,771,555],{},[402,773,774],{},"Animate this series",[381,776,777,782,787,789],{},[402,778,779],{},[307,780,781],{},"transition",[402,783,784],{},[307,785,786],{},"ChartTransition",[402,788,555],{},[402,790,791],{},"Timing and easing of data changes",[290,793,794,795,466,798,466,801,804,805,808,809,466,812,815],{},"Events: ",[307,796,797],{},"@click",[307,799,800],{},"@mouseenter",[307,802,803],{},"@mouseleave"," with ",[307,806,807],{},"(bar, index, event)",", and ",[307,810,811],{},"@animation-start",[307,813,814],{},"@animation-end",".",[294,817,819],{"id":818},"radialbar-slots","RadialBar slots",[375,821,822,834],{},[378,823,824],{},[381,825,826,829,832],{},[384,827,828],{},"Slot",[384,830,831],{},"Props",[384,833,395],{},[397,835,836,851],{},[381,837,838,843,848],{},[402,839,840],{},[307,841,842],{},"#shape",[402,844,845],{},[307,846,847],{},"RadialBarShapeSlotProps",[402,849,850],{},"Replace a sector; includes sector geometry, payload and colors",[381,852,853,858,863],{},[402,854,855],{},[307,856,857],{},"#label",[402,859,860],{},[307,861,862],{},"LabelListSlotProps",[402,864,865],{},"Replace a sector label",[290,867,343,868,870,871,873,874,815],{},[307,869,513],{}," to enable default labels or supply ",[307,872,857],{}," for custom content.\nSlots return ",[307,875,876],{},"VNodeChild",{"title":878,"searchDepth":879,"depth":879,"links":880},"",2,[881,882,883,884,885,886],{"id":296,"depth":879,"text":297},{"id":321,"depth":879,"text":322},{"id":339,"depth":879,"text":340},{"id":357,"depth":879,"text":358},{"id":372,"depth":879,"text":373},{"id":818,"depth":879,"text":819},"Build radial bar charts for circular progress and comparison","md",null,{},{"icon":157},{"title":154,"description":887},"HgdgPnvzk14VagkBaqbewhOGB6IEvRtOw6fevj1Iwac",[895,897],{"title":149,"path":150,"stem":151,"description":896,"icon":152,"children":-1},"Build radar charts for multi-dimensional data comparison",{"title":159,"path":160,"stem":161,"description":898,"icon":162,"children":-1},"Plot data points on an X-Y plane to visualize relationships",1793527168357]