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