[{"data":1,"prerenderedAt":1623},["ShallowReactive",2],{"navigation_docs":3,"-components-shapes":284,"-components-shapes-surround":1618},[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":270,"body":286,"description":1611,"extension":1612,"links":1613,"meta":1614,"navigation":1615,"path":271,"seo":1616,"stem":272,"__hash__":1617},"docs\u002F4.components\u002F11.shapes.md",{"type":287,"value":288,"toc":1598},"minimark",[289,321,337,342,358,364,367,379,467,536,540,558,603,648,651,664,803,862,865,877,1005,1050,1054,1062,1155,1202,1206,1213,1300,1357,1361,1373,1448,1452,1462,1489,1535,1539,1564,1568,1594],[290,291,292,293,297,298,301,302,305,306,309,310,309,313,316,317,320],"p",{},"The shape components are the SVG pieces that the series draw: a bar is a ",[294,295,296],"code",{},"Rectangle",", a pie slice is a ",[294,299,300],{},"Sector",", a line is a ",[294,303,304],{},"Curve",". Use them in ",[294,307,308],{},"#shape",", ",[294,311,312],{},"#activeBar",[294,314,315],{},"#dot"," or ",[294,318,319],{},"#content"," slots to change one detail of an item and keep the rest of the geometry.",[290,322,323,324,309,327,309,330,309,333,336],{},"Every shape takes its geometry as props and passes other attributes (",[294,325,326],{},"fill",[294,328,329],{},"stroke",[294,331,332],{},"class",[294,334,335],{},"opacity",", events) to the SVG element. A shape with missing or invalid geometry renders nothing.",[338,339,341],"h2",{"id":340},"use-a-shape-in-a-slot","Use a shape in a slot",[290,343,344,345,347,348,351,352,354,355,357],{},"The ",[294,346,308],{}," slot of ",[294,349,350],{},"Bar"," gets the geometry of each bar. Pass it on to a ",[294,353,296],{}," with rounded top corners; ",[294,356,312],{}," draws the hovered bar.",[359,360],"chart-demo",{"description":361,"name":362,"src":363},"Bar #shape and #activeBar slots that render Rectangle.","Rounded Bars","guide-charts\u002Fshape-slots-chart",[338,365,296],{"id":366},"rectangle",[290,368,369,370,309,372,375,376,378],{},"A rectangle with optional rounded corners. ",[294,371,350],{},[294,373,374],{},"ReferenceArea"," and the ",[294,377,223],{}," cursor of a bar chart draw it.",[380,381,382,401],"table",{},[383,384,385],"thead",{},[386,387,388,392,395,398],"tr",{},[389,390,391],"th",{},"Prop",[389,393,394],{},"Type",[389,396,397],{},"Default",[389,399,400],{},"Description",[402,403,404,428,449],"tbody",{},[386,405,406,415,420,425],{},[407,408,409,309,412],"td",{},[294,410,411],{},"x",[294,413,414],{},"y",[407,416,417],{},[294,418,419],{},"number",[407,421,422],{},[294,423,424],{},"0",[407,426,427],{},"Top left corner",[386,429,430,438,442,446],{},[407,431,432,309,435],{},[294,433,434],{},"width",[294,436,437],{},"height",[407,439,440],{},[294,441,419],{},[407,443,444],{},[294,445,424],{},[407,447,448],{},"Size. Negative values grow to the left or up",[386,450,451,456,461,464],{},[407,452,453],{},[294,454,455],{},"radius",[407,457,458],{},[294,459,460],{},"number | [tl, tr, br, bl]",[407,462,463],{},"—",[407,465,466],{},"Corner radius, one value or one per corner. Capped at half the smaller side",[468,469,474],"pre",{"className":470,"code":471,"language":472,"meta":473,"style":473},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBar data-key=\"value\">\n  \u003Ctemplate #shape=\"{ x, y, width, height, fill }\">\n    \u003CRectangle :x=\"x\" :y=\"y\" :width=\"width\" :height=\"height\" :radius=\"[6, 6, 0, 0]\" :fill=\"fill\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FBar>\n","vue","",[294,475,476,507,514,520,526],{"__ignoreMap":473},[477,478,481,485,488,492,495,498,502,504],"span",{"class":479,"line":480},"line",1,[477,482,484],{"class":483},"sMK4o","\u003C",[477,486,350],{"class":487},"swJcz",[477,489,491],{"class":490},"spNyl"," data-key",[477,493,494],{"class":483},"=",[477,496,497],{"class":483},"\"",[477,499,501],{"class":500},"sfazB","value",[477,503,497],{"class":483},[477,505,506],{"class":483},">\n",[477,508,510],{"class":479,"line":509},2,[477,511,513],{"class":512},"sTEyZ","  \u003Ctemplate #shape=\"{ x, y, width, height, fill }\">\n",[477,515,517],{"class":479,"line":516},3,[477,518,519],{"class":512},"    \u003CRectangle :x=\"x\" :y=\"y\" :width=\"width\" :height=\"height\" :radius=\"[6, 6, 0, 0]\" :fill=\"fill\" \u002F>\n",[477,521,523],{"class":479,"line":522},4,[477,524,525],{"class":512},"  \u003C\u002Ftemplate>\n",[477,527,529,532,534],{"class":479,"line":528},5,[477,530,531],{"class":483},"\u003C\u002F",[477,533,350],{"class":487},[477,535,506],{"class":483},[338,537,539],{"id":538},"dot","Dot",[290,541,542,543,309,546,549,550,553,554,557],{},"A circle. ",[294,544,545],{},"Line",[294,547,548],{},"Area"," and ",[294,551,552],{},"Radar"," draw their dots with it, and ",[294,555,556],{},"ReferenceDot"," draws its marker.",[380,559,560,570],{},[383,561,562],{},[386,563,564,566,568],{},[389,565,391],{},[389,567,394],{},[389,569,400],{},[402,571,572,589],{},[386,573,574,582,586],{},[407,575,576,309,579],{},[294,577,578],{},"cx",[294,580,581],{},"cy",[407,583,584],{},[294,585,419],{},[407,587,588],{},"Center",[386,590,591,596,600],{},[407,592,593],{},[294,594,595],{},"r",[407,597,598],{},[294,599,419],{},[407,601,602],{},"Radius",[468,604,606],{"className":470,"code":605,"language":472,"meta":473,"style":473},"\u003CLine data-key=\"value\">\n  \u003Ctemplate #dot=\"{ cx, cy, value }\">\n    \u003CDot :cx=\"cx\" :cy=\"cy\" :r=\"value > 250 ? 6 : 3\" fill=\"#f97316\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FLine>\n",[294,607,608,626,631,636,640],{"__ignoreMap":473},[477,609,610,612,614,616,618,620,622,624],{"class":479,"line":480},[477,611,484],{"class":483},[477,613,545],{"class":487},[477,615,491],{"class":490},[477,617,494],{"class":483},[477,619,497],{"class":483},[477,621,501],{"class":500},[477,623,497],{"class":483},[477,625,506],{"class":483},[477,627,628],{"class":479,"line":509},[477,629,630],{"class":512},"  \u003Ctemplate #dot=\"{ cx, cy, value }\">\n",[477,632,633],{"class":479,"line":516},[477,634,635],{"class":512},"    \u003CDot :cx=\"cx\" :cy=\"cy\" :r=\"value > 250 ? 6 : 3\" fill=\"#f97316\" \u002F>\n",[477,637,638],{"class":479,"line":522},[477,639,525],{"class":512},[477,641,642,644,646],{"class":479,"line":528},[477,643,531],{"class":483},[477,645,545],{"class":487},[477,647,506],{"class":483},[338,649,300],{"id":650},"sector",[290,652,653,654,309,657,549,660,663],{},"A ring segment. ",[294,655,656],{},"Pie",[294,658,659],{},"RadialBar",[294,661,662],{},"SunburstChart"," draw their slices with it.",[380,665,666,678],{},[383,667,668],{},[386,669,670,672,674,676],{},[389,671,391],{},[389,673,394],{},[389,675,397],{},[389,677,400],{},[402,679,680,698,722,746,765,785],{},[386,681,682,688,692,696],{},[407,683,684,309,686],{},[294,685,578],{},[294,687,581],{},[407,689,690],{},[294,691,419],{},[407,693,694],{},[294,695,424],{},[407,697,588],{},[386,699,700,708,712,716],{},[407,701,702,309,705],{},[294,703,704],{},"inner-radius",[294,706,707],{},"outer-radius",[407,709,710],{},[294,711,419],{},[407,713,714],{},[294,715,424],{},[407,717,718,719,721],{},"Radii in px. ",[294,720,424],{}," inner radius draws a pie slice",[386,723,724,732,736,740],{},[407,725,726,309,729],{},[294,727,728],{},"start-angle",[294,730,731],{},"end-angle",[407,733,734],{},[294,735,419],{},[407,737,738],{},[294,739,424],{},[407,741,742,743,745],{},"Angles in degrees. ",[294,744,424],{}," points right; angles grow counterclockwise",[386,747,748,753,758,762],{},[407,749,750],{},[294,751,752],{},"corner-radius",[407,754,755],{},[294,756,757],{},"number | string",[407,759,760],{},[294,761,424],{},[407,763,764],{},"Rounds the corners",[386,766,767,772,777,782],{},[407,768,769],{},[294,770,771],{},"force-corner-radius",[407,773,774],{},[294,775,776],{},"boolean",[407,778,779],{},[294,780,781],{},"false",[407,783,784],{},"Keep the corner radius on very thin sectors",[386,786,787,792,796,800],{},[407,788,789],{},[294,790,791],{},"corner-is-external",[407,793,794],{},[294,795,776],{},[407,797,798],{},[294,799,781],{},[407,801,802],{},"Round the corners outwards",[468,804,806],{"className":470,"code":805,"language":472,"meta":473,"style":473},"\u003CPie :data=\"data\" data-key=\"value\">\n  \u003Ctemplate #activeShape=\"sector\">\n    \u003CSector v-bind=\"sector\" :outer-radius=\"sector.outerRadius + 8\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FPie>\n",[294,807,808,840,845,850,854],{"__ignoreMap":473},[477,809,810,812,814,817,820,822,824,826,828,830,832,834,836,838],{"class":479,"line":480},[477,811,484],{"class":483},[477,813,656],{"class":487},[477,815,816],{"class":483}," :",[477,818,819],{"class":490},"data",[477,821,494],{"class":483},[477,823,497],{"class":483},[477,825,819],{"class":512},[477,827,497],{"class":483},[477,829,491],{"class":490},[477,831,494],{"class":483},[477,833,497],{"class":483},[477,835,501],{"class":500},[477,837,497],{"class":483},[477,839,506],{"class":483},[477,841,842],{"class":479,"line":509},[477,843,844],{"class":512},"  \u003Ctemplate #activeShape=\"sector\">\n",[477,846,847],{"class":479,"line":516},[477,848,849],{"class":512},"    \u003CSector v-bind=\"sector\" :outer-radius=\"sector.outerRadius + 8\" \u002F>\n",[477,851,852],{"class":479,"line":522},[477,853,525],{"class":512},[477,855,856,858,860],{"class":479,"line":528},[477,857,531],{"class":483},[477,859,656],{"class":487},[477,861,506],{"class":483},[338,863,304],{"id":864},"curve",[290,866,867,868,309,870,872,873,876],{},"A line or area path through points. ",[294,869,545],{},[294,871,548],{}," and the line of a ",[294,874,875],{},"Scatter"," draw their path with it.",[380,878,879,889],{},[383,880,881],{},[386,882,883,885,887],{},[389,884,391],{},[389,886,394],{},[389,888,400],{},[402,890,891,915,946,961,976,990],{},[386,892,893,898,903],{},[407,894,895],{},[294,896,897],{},"points",[407,899,900],{},[294,901,902],{},"{ x, y }[]",[407,904,905,906,316,908,910,911,914],{},"Points of the path. A point with ",[294,907,411],{},[294,909,414],{}," set to ",[294,912,913],{},"null"," is a gap",[386,916,917,922,927],{},[407,918,919],{},[294,920,921],{},"type",[407,923,924],{},[294,925,926],{},"CurveType | CurveFactory",[407,928,929,930,309,933,309,936,309,939,309,942,945],{},"Interpolation: ",[294,931,932],{},"'linear'",[294,934,935],{},"'monotone'",[294,937,938],{},"'step'",[294,940,941],{},"'basis'",[294,943,944],{},"'natural'"," and the other d3 curves, or your own d3 curve factory",[386,947,948,953,958],{},[407,949,950],{},[294,951,952],{},"base-line",[407,954,955],{},[294,956,957],{},"number | { x, y }[]",[407,959,960],{},"Draw an area down to this value or path instead of a line",[386,962,963,968,973],{},[407,964,965],{},[294,966,967],{},"layout",[407,969,970],{},[294,971,972],{},"'horizontal' | 'vertical'",[407,974,975],{},"Direction of the area base line",[386,977,978,983,987],{},[407,979,980],{},[294,981,982],{},"connect-nulls",[407,984,985],{},[294,986,776],{},[407,988,989],{},"Join the path across gaps",[386,991,992,997,1002],{},[407,993,994],{},[294,995,996],{},"path",[407,998,999],{},[294,1000,1001],{},"string",[407,1003,1004],{},"A ready SVG path; skips the calculation",[468,1006,1008],{"className":470,"code":1007,"language":472,"meta":473,"style":473},"\u003CLine data-key=\"value\">\n  \u003Ctemplate #shape=\"curve\">\n    \u003CCurve v-bind=\"curve\" stroke-dasharray=\"4 4\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FLine>\n",[294,1009,1010,1028,1033,1038,1042],{"__ignoreMap":473},[477,1011,1012,1014,1016,1018,1020,1022,1024,1026],{"class":479,"line":480},[477,1013,484],{"class":483},[477,1015,545],{"class":487},[477,1017,491],{"class":490},[477,1019,494],{"class":483},[477,1021,497],{"class":483},[477,1023,501],{"class":500},[477,1025,497],{"class":483},[477,1027,506],{"class":483},[477,1029,1030],{"class":479,"line":509},[477,1031,1032],{"class":512},"  \u003Ctemplate #shape=\"curve\">\n",[477,1034,1035],{"class":479,"line":516},[477,1036,1037],{"class":512},"    \u003CCurve v-bind=\"curve\" stroke-dasharray=\"4 4\" \u002F>\n",[477,1039,1040],{"class":479,"line":522},[477,1041,525],{"class":512},[477,1043,1044,1046,1048],{"class":479,"line":528},[477,1045,531],{"class":483},[477,1047,545],{"class":487},[477,1049,506],{"class":483},[338,1051,1053],{"id":1052},"symbols","Symbols",[290,1055,1056,1057,375,1059,1061],{},"A marker symbol. ",[294,1058,875],{},[294,1060,228],{}," icons draw it.",[380,1063,1064,1076],{},[383,1065,1066],{},[386,1067,1068,1070,1072,1074],{},[389,1069,391],{},[389,1071,394],{},[389,1073,397],{},[389,1075,400],{},[402,1077,1078,1097,1113,1132],{},[386,1079,1080,1084,1089,1094],{},[407,1081,1082],{},[294,1083,921],{},[407,1085,1086],{},[294,1087,1088],{},"'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'",[407,1090,1091],{},[294,1092,1093],{},"'circle'",[407,1095,1096],{},"Symbol",[386,1098,1099,1105,1109,1111],{},[407,1100,1101,309,1103],{},[294,1102,578],{},[294,1104,581],{},[407,1106,1107],{},[294,1108,419],{},[407,1110,463],{},[407,1112,588],{},[386,1114,1115,1120,1124,1129],{},[407,1116,1117],{},[294,1118,1119],{},"size",[407,1121,1122],{},[294,1123,419],{},[407,1125,1126],{},[294,1127,1128],{},"64",[407,1130,1131],{},"Size of the symbol",[386,1133,1134,1139,1144,1149],{},[407,1135,1136],{},[294,1137,1138],{},"size-type",[407,1140,1141],{},[294,1142,1143],{},"'area' | 'diameter'",[407,1145,1146],{},[294,1147,1148],{},"'area'",[407,1150,1151,1152,1154],{},"Read ",[294,1153,1119],{}," as an area in px² or as a diameter in px",[468,1156,1158],{"className":470,"code":1157,"language":472,"meta":473,"style":473},"\u003CScatter :data=\"data\">\n  \u003Ctemplate #shape=\"{ cx, cy, isActive }\">\n    \u003CSymbols type=\"diamond\" :cx=\"cx\" :cy=\"cy\" :size=\"isActive ? 160 : 80\" fill=\"#14b8a6\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FScatter>\n",[294,1159,1160,1180,1185,1190,1194],{"__ignoreMap":473},[477,1161,1162,1164,1166,1168,1170,1172,1174,1176,1178],{"class":479,"line":480},[477,1163,484],{"class":483},[477,1165,875],{"class":487},[477,1167,816],{"class":483},[477,1169,819],{"class":490},[477,1171,494],{"class":483},[477,1173,497],{"class":483},[477,1175,819],{"class":512},[477,1177,497],{"class":483},[477,1179,506],{"class":483},[477,1181,1182],{"class":479,"line":509},[477,1183,1184],{"class":512},"  \u003Ctemplate #shape=\"{ cx, cy, isActive }\">\n",[477,1186,1187],{"class":479,"line":516},[477,1188,1189],{"class":512},"    \u003CSymbols type=\"diamond\" :cx=\"cx\" :cy=\"cy\" :size=\"isActive ? 160 : 80\" fill=\"#14b8a6\" \u002F>\n",[477,1191,1192],{"class":479,"line":522},[477,1193,525],{"class":512},[477,1195,1196,1198,1200],{"class":479,"line":528},[477,1197,531],{"class":483},[477,1199,875],{"class":487},[477,1201,506],{"class":483},[338,1203,1205],{"id":1204},"trapezoid","Trapezoid",[290,1207,1208,1209,1212],{},"A trapezoid with a horizontal top and bottom. ",[294,1210,1211],{},"Funnel"," draws its stages with it.",[380,1214,1215,1227],{},[383,1216,1217],{},[386,1218,1219,1221,1223,1225],{},[389,1220,391],{},[389,1222,394],{},[389,1224,397],{},[389,1226,400],{},[402,1228,1229,1247,1265,1283],{},[386,1230,1231,1237,1241,1245],{},[407,1232,1233,309,1235],{},[294,1234,411],{},[294,1236,414],{},[407,1238,1239],{},[294,1240,419],{},[407,1242,1243],{},[294,1244,424],{},[407,1246,427],{},[386,1248,1249,1254,1258,1262],{},[407,1250,1251],{},[294,1252,1253],{},"upper-width",[407,1255,1256],{},[294,1257,419],{},[407,1259,1260],{},[294,1261,424],{},[407,1263,1264],{},"Width of the top edge",[386,1266,1267,1272,1276,1280],{},[407,1268,1269],{},[294,1270,1271],{},"lower-width",[407,1273,1274],{},[294,1275,419],{},[407,1277,1278],{},[294,1279,424],{},[407,1281,1282],{},"Width of the bottom edge, centered under the top edge",[386,1284,1285,1289,1293,1297],{},[407,1286,1287],{},[294,1288,437],{},[407,1290,1291],{},[294,1292,419],{},[407,1294,1295],{},[294,1296,424],{},[407,1298,1299],{},"Height",[468,1301,1303],{"className":470,"code":1302,"language":472,"meta":473,"style":473},"\u003CFunnel :data=\"data\" data-key=\"value\">\n  \u003Ctemplate #shape=\"stage\">\n    \u003CTrapezoid v-bind=\"stage\" stroke=\"#fff\" :stroke-width=\"2\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FFunnel>\n",[294,1304,1305,1335,1340,1345,1349],{"__ignoreMap":473},[477,1306,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333],{"class":479,"line":480},[477,1308,484],{"class":483},[477,1310,1211],{"class":487},[477,1312,816],{"class":483},[477,1314,819],{"class":490},[477,1316,494],{"class":483},[477,1318,497],{"class":483},[477,1320,819],{"class":512},[477,1322,497],{"class":483},[477,1324,491],{"class":490},[477,1326,494],{"class":483},[477,1328,497],{"class":483},[477,1330,501],{"class":500},[477,1332,497],{"class":483},[477,1334,506],{"class":483},[477,1336,1337],{"class":479,"line":509},[477,1338,1339],{"class":512},"  \u003Ctemplate #shape=\"stage\">\n",[477,1341,1342],{"class":479,"line":516},[477,1343,1344],{"class":512},"    \u003CTrapezoid v-bind=\"stage\" stroke=\"#fff\" :stroke-width=\"2\" \u002F>\n",[477,1346,1347],{"class":479,"line":522},[477,1348,525],{"class":512},[477,1350,1351,1353,1355],{"class":479,"line":528},[477,1352,531],{"class":483},[477,1354,1211],{"class":487},[477,1356,506],{"class":483},[338,1358,1360],{"id":1359},"cross","Cross",[290,1362,1363,1364,1366,1367,1369,1370,1372],{},"Two lines that cross: a horizontal line at ",[294,1365,414],{}," and a vertical line at ",[294,1368,411],{},". The ",[294,1371,223],{}," cursor of a scatter chart draws it.",[380,1374,1375,1387],{},[383,1376,1377],{},[386,1378,1379,1381,1383,1385],{},[389,1380,391],{},[389,1382,394],{},[389,1384,397],{},[389,1386,400],{},[402,1388,1389,1408,1429],{},[386,1390,1391,1397,1401,1405],{},[407,1392,1393,309,1395],{},[294,1394,411],{},[294,1396,414],{},[407,1398,1399],{},[294,1400,419],{},[407,1402,1403],{},[294,1404,424],{},[407,1406,1407],{},"Position of the vertical and the horizontal line",[386,1409,1410,1418,1422,1426],{},[407,1411,1412,309,1415],{},[294,1413,1414],{},"top",[294,1416,1417],{},"left",[407,1419,1420],{},[294,1421,419],{},[407,1423,1424],{},[294,1425,424],{},[407,1427,1428],{},"Start of the vertical and the horizontal line",[386,1430,1431,1437,1441,1445],{},[407,1432,1433,309,1435],{},[294,1434,434],{},[294,1436,437],{},[407,1438,1439],{},[294,1440,419],{},[407,1442,1443],{},[294,1444,424],{},[407,1446,1447],{},"Length of the horizontal and the vertical line",[338,1449,1451],{"id":1450},"polygon","Polygon",[290,1453,1454,1455,1458,1459,1461],{},"A closed path through points. It builds the same path as the polygon rings of ",[294,1456,1457],{},"PolarGrid","; use it to draw your own ",[294,1460,552],{}," area.",[380,1463,1464,1474],{},[383,1465,1466],{},[386,1467,1468,1470,1472],{},[389,1469,391],{},[389,1471,394],{},[389,1473,400],{},[402,1475,1476],{},[386,1477,1478,1482,1486],{},[407,1479,1480],{},[294,1481,897],{},[407,1483,1484],{},[294,1485,902],{},[407,1487,1488],{},"Corners in order. If one corner is not a number, nothing renders",[468,1490,1492],{"className":470,"code":1491,"language":472,"meta":473,"style":473},"\u003CRadar data-key=\"score\">\n  \u003Ctemplate #shape=\"{ points, fill }\">\n    \u003CPolygon :points=\"points\" :fill=\"fill\" fill-opacity=\"0.3\" stroke=\"#f97316\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FRadar>\n",[294,1493,1494,1513,1518,1523,1527],{"__ignoreMap":473},[477,1495,1496,1498,1500,1502,1504,1506,1509,1511],{"class":479,"line":480},[477,1497,484],{"class":483},[477,1499,552],{"class":487},[477,1501,491],{"class":490},[477,1503,494],{"class":483},[477,1505,497],{"class":483},[477,1507,1508],{"class":500},"score",[477,1510,497],{"class":483},[477,1512,506],{"class":483},[477,1514,1515],{"class":479,"line":509},[477,1516,1517],{"class":512},"  \u003Ctemplate #shape=\"{ points, fill }\">\n",[477,1519,1520],{"class":479,"line":516},[477,1521,1522],{"class":512},"    \u003CPolygon :points=\"points\" :fill=\"fill\" fill-opacity=\"0.3\" stroke=\"#f97316\" \u002F>\n",[477,1524,1525],{"class":479,"line":522},[477,1526,525],{"class":512},[477,1528,1529,1531,1533],{"class":479,"line":528},[477,1530,531],{"class":483},[477,1532,552],{"class":487},[477,1534,506],{"class":483},[338,1536,1538],{"id":1537},"cursors","Cursors",[290,1540,344,1541,347,1544,1547,1548,1550,1551,1553,1554,1556,1557,1559,1560,1563],{},[294,1542,1543],{},"#cursor",[294,1545,1546],{},"\u003CTooltip>"," receives the props of the default cursor shape: ",[294,1549,296],{}," for bar charts, ",[294,1552,304],{}," for line and area charts, ",[294,1555,1360],{}," for scatter charts and ",[294,1558,300],{}," for radial charts. See ",[1561,1562,223],"a",{"href":224},".",[338,1565,1567],{"id":1566},"related","Related",[1569,1570,1571,1578,1589],"ul",{},[1572,1573,1574,1577],"li",{},[1561,1575,1576],{"href":39},"Customize charts",": colors, slots and SVG attributes",[1572,1579,1580,1583,1584,1586,1587],{},[1561,1581,1582],{"href":69},"Rounded bar corners",": the ",[294,1585,455],{}," prop on ",[294,1588,350],{},[1572,1590,1591,1593],{},[1561,1592,260],{"href":261},": text and per-item attributes",[1595,1596,1597],"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);}",{"title":473,"searchDepth":509,"depth":509,"links":1599},[1600,1601,1602,1603,1604,1605,1606,1607,1608,1609,1610],{"id":340,"depth":509,"text":341},{"id":366,"depth":509,"text":296},{"id":538,"depth":509,"text":539},{"id":650,"depth":509,"text":300},{"id":864,"depth":509,"text":304},{"id":1052,"depth":509,"text":1053},{"id":1204,"depth":509,"text":1205},{"id":1359,"depth":509,"text":1360},{"id":1450,"depth":509,"text":1451},{"id":1537,"depth":509,"text":1538},{"id":1566,"depth":509,"text":1567},"SVG building blocks for custom bars, points, sectors and cursors","md",null,{},{"icon":273},{"title":270,"description":1611},"iakc2My4IcuTTCzJN9MtzfXPrbMNUJlaQ2R3zgqroWw",[1619,1621],{"title":265,"path":266,"stem":267,"description":1620,"icon":268,"children":-1},"Render SVG text with auto-wrapping, rotation, and scaling",{"title":275,"path":276,"stem":277,"description":1622,"icon":278,"children":-1},"Read chart size, axis scales and tooltip state from your own components",1793527171516]