[{"data":1,"prerenderedAt":983},["ShallowReactive",2],{"navigation_docs":3,"-components-legend":177,"-components-legend-surround":978},[4,21,77,137],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","/getting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guides","i-lucide-book-open","/guides","2.guides",[27,32,37,42,47,52,57,62,67,72],{"title":28,"path":29,"stem":30,"icon":31},"Customize","/guides/customize","2.guides/01.customize","i-lucide-paintbrush",{"title":33,"path":34,"stem":35,"icon":36},"Active Index","/guides/active-state","2.guides/02.active-state","i-lucide-mouse-pointer",{"title":38,"path":39,"stem":40,"icon":41},"Domain and Ticks","/guides/domain-and-ticks","2.guides/03.domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Axis Ticks","/guides/axis-ticks","2.guides/04.axis-ticks","i-lucide-hash",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","/guides/chart-size","2.guides/05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Index and Layers","/guides/z-order-and-layers","2.guides/06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","/guides/coordinate-systems","2.guides/07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","/guides/performance","2.guides/08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","/guides/rounded-bar-corners","2.guides/09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","/guides/bar-alignment","2.guides/10.bar-alignment","i-lucide-align-center",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":20},"Charts","i-lucide-bar-chart-3","/charts","3.charts",[83,88,93,98,103,108,113,118,123,128,133],{"title":84,"path":85,"stem":86,"icon":87},"Area Chart","/charts/area-chart","3.charts/1.area-chart","i-lucide-area-chart",{"title":89,"path":90,"stem":91,"icon":92},"Treemap","/charts/treemap","3.charts/10.treemap","i-lucide-layout-grid",{"title":94,"path":95,"stem":96,"icon":97},"Sankey","/charts/sankey","3.charts/11.sankey","i-lucide-git-fork",{"title":99,"path":100,"stem":101,"icon":102},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":104,"path":105,"stem":106,"icon":107},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":109,"path":110,"stem":111,"icon":112},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":114,"path":115,"stem":116,"icon":117},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":119,"path":120,"stem":121,"icon":122},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":124,"path":125,"stem":126,"icon":127},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":129,"path":130,"stem":131,"icon":132},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":134,"path":135,"stem":136,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":20},"Components","i-lucide-code","/components","4.components",[143,148,153,158,163,167,172],{"title":144,"path":145,"stem":146,"icon":147},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":149,"path":150,"stem":151,"icon":152},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":154,"path":155,"stem":156,"icon":157},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":159,"path":160,"stem":161,"icon":162},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":164,"path":165,"stem":166,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":168,"path":169,"stem":170,"icon":171},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":173,"path":174,"stem":175,"icon":176},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":178,"title":149,"body":179,"description":971,"extension":972,"links":973,"meta":974,"navigation":975,"path":150,"seo":976,"stem":151,"__hash__":977},"docs/4.components/2.legend.md",{"type":180,"value":181,"toc":964},"minimark",[182,191,196,296,300,315,333,339,366,388,393,429,454,458,464,530,534,918,922,960],[183,184,185,186,190],"p",{},"The ",[187,188,189],"code",{},"\u003CLegend>"," component displays a legend identifying chart series by color and label.",[192,193,195],"h2",{"id":194},"add-a-legend","Add a legend",[197,198,203],"pre",{"className":199,"code":200,"language":201,"meta":202,"style":202},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBarChart :width=\"500\" :height=\"300\" :data=\"data\">\n  \u003CBar data-key=\"desktop\" fill=\"#8884d8\" />\n  \u003CBar data-key=\"mobile\" fill=\"#82ca9d\" />\n  \u003CLegend />\n\u003C/BarChart>\n","vue","",[187,204,205,268,274,280,286],{"__ignoreMap":202},[206,207,210,214,218,221,225,228,231,235,237,239,242,244,246,249,251,253,256,258,260,263,265],"span",{"class":208,"line":209},"line",1,[206,211,213],{"class":212},"sMK4o","\u003C",[206,215,217],{"class":216},"swJcz","BarChart",[206,219,220],{"class":212}," :",[206,222,224],{"class":223},"spNyl","width",[206,226,227],{"class":212},"=",[206,229,230],{"class":212},"\"",[206,232,234],{"class":233},"sbssI","500",[206,236,230],{"class":212},[206,238,220],{"class":212},[206,240,241],{"class":223},"height",[206,243,227],{"class":212},[206,245,230],{"class":212},[206,247,248],{"class":233},"300",[206,250,230],{"class":212},[206,252,220],{"class":212},[206,254,255],{"class":223},"data",[206,257,227],{"class":212},[206,259,230],{"class":212},[206,261,255],{"class":262},"sTEyZ",[206,264,230],{"class":212},[206,266,267],{"class":212},">\n",[206,269,271],{"class":208,"line":270},2,[206,272,273],{"class":262},"  \u003CBar data-key=\"desktop\" fill=\"#8884d8\" />\n",[206,275,277],{"class":208,"line":276},3,[206,278,279],{"class":262},"  \u003CBar data-key=\"mobile\" fill=\"#82ca9d\" />\n",[206,281,283],{"class":208,"line":282},4,[206,284,285],{"class":262},"  \u003CLegend />\n",[206,287,289,292,294],{"class":208,"line":288},5,[206,290,291],{"class":212},"\u003C/",[206,293,217],{"class":216},[206,295,267],{"class":212},[192,297,299],{"id":298},"position-the-legend","Position the legend",[183,301,302,303,306,307,310,311,314],{},"Use the ",[187,304,305],{},"position"," prop to place the legend relative to the chart. When set, it overrides ",[187,308,309],{},"align"," and ",[187,312,313],{},"verticalAlign",".",[183,316,317,321,322,325,326,325,329,332],{},[318,319,320],"strong",{},"Inside positions"," (",[187,323,324],{},"insideTop",", ",[187,327,328],{},"insideBottomRight",[187,330,331],{},"center",", …) float over the plot area — the chart keeps its full size:",[334,335],"chart-demo",{"description":336,"name":337,"src":338},"The legend floats inside the plot area at the top right without shrinking it.","Inside Position","legend-charts/legend-inside-position-chart",[197,340,342],{"className":199,"code":341,"language":201,"meta":202,"style":202},"\u003CLegend position=\"insideTopRight\" />\n",[187,343,344],{"__ignoreMap":202},[206,345,346,348,350,353,355,357,361,363],{"class":208,"line":209},[206,347,213],{"class":212},[206,349,149],{"class":216},[206,351,352],{"class":223}," position",[206,354,227],{"class":212},[206,356,230],{"class":212},[206,358,360],{"class":359},"sfazB","insideTopRight",[206,362,230],{"class":212},[206,364,365],{"class":212}," />\n",[183,367,368,321,371,325,374,325,377,325,380,383,384,387],{},[318,369,370],{},"Outside positions",[187,372,373],{},"top",[187,375,376],{},"bottom",[187,378,379],{},"left",[187,381,382],{},"right",") sit beyond the axes, and the plot area shrinks to make room. Use ",[187,385,386],{},"offset"," to control the gap:",[334,389],{"description":390,"name":391,"src":392},"The legend sits above the chart with a 10px offset, and the plot area makes space for it.","Outside Position","legend-charts/legend-outside-position-chart",[197,394,396],{"className":199,"code":395,"language":201,"meta":202,"style":202},"\u003CLegend position=\"top\" :offset=\"10\" />\n",[187,397,398],{"__ignoreMap":202},[206,399,400,402,404,406,408,410,412,414,416,418,420,422,425,427],{"class":208,"line":209},[206,401,213],{"class":212},[206,403,149],{"class":216},[206,405,352],{"class":223},[206,407,227],{"class":212},[206,409,230],{"class":212},[206,411,373],{"class":359},[206,413,230],{"class":212},[206,415,220],{"class":212},[206,417,386],{"class":223},[206,419,227],{"class":212},[206,421,230],{"class":212},[206,423,424],{"class":233},"10",[206,426,230],{"class":212},[206,428,365],{"class":212},[183,430,431,432,435,436,439,440,443,444,446,447,449,450,453],{},"When ",[187,433,434],{},"layout"," is left at its default (",[187,437,438],{},"'auto'","), it resolves to ",[187,441,442],{},"vertical"," for ",[187,445,379],{},"/",[187,448,382],{}," positions and ",[187,451,452],{},"horizontal"," otherwise.",[192,455,457],{"id":456},"customize-legend-content","Customize legend content",[183,459,302,460,463],{},[187,461,462],{},"#content"," slot:",[197,465,467],{"className":199,"code":466,"language":201,"meta":202,"style":202},"\u003CLegend>\n  \u003Ctemplate #content=\"legendProps\">\n    \u003Cdiv class=\"flex gap-4 justify-center\">\n      \u003Cspan v-for=\"entry in legendProps.payload\" :key=\"entry.value\" class=\"flex items-center gap-1\">\n        \u003Cspan class=\"w-3 h-3 rounded-full\" :style=\"{ backgroundColor: entry.color }\" />\n        {{ entry.value }}\n      \u003C/span>\n    \u003C/div>\n  \u003C/template>\n\u003C/Legend>\n",[187,468,469,477,482,487,492,497,503,509,515,521],{"__ignoreMap":202},[206,470,471,473,475],{"class":208,"line":209},[206,472,213],{"class":212},[206,474,149],{"class":216},[206,476,267],{"class":212},[206,478,479],{"class":208,"line":270},[206,480,481],{"class":262},"  \u003Ctemplate #content=\"legendProps\">\n",[206,483,484],{"class":208,"line":276},[206,485,486],{"class":262},"    \u003Cdiv class=\"flex gap-4 justify-center\">\n",[206,488,489],{"class":208,"line":282},[206,490,491],{"class":262},"      \u003Cspan v-for=\"entry in legendProps.payload\" :key=\"entry.value\" class=\"flex items-center gap-1\">\n",[206,493,494],{"class":208,"line":288},[206,495,496],{"class":262},"        \u003Cspan class=\"w-3 h-3 rounded-full\" :style=\"{ backgroundColor: entry.color }\" />\n",[206,498,500],{"class":208,"line":499},6,[206,501,502],{"class":262},"        {{ entry.value }}\n",[206,504,506],{"class":208,"line":505},7,[206,507,508],{"class":262},"      \u003C/span>\n",[206,510,512],{"class":208,"line":511},8,[206,513,514],{"class":262},"    \u003C/div>\n",[206,516,518],{"class":208,"line":517},9,[206,519,520],{"class":262},"  \u003C/template>\n",[206,522,524,526,528],{"class":208,"line":523},10,[206,525,291],{"class":212},[206,527,149],{"class":216},[206,529,267],{"class":212},[192,531,533],{"id":532},"legend-props","Legend props",[535,536,537,556],"table",{},[538,539,540],"thead",{},[541,542,543,547,550,553],"tr",{},[544,545,546],"th",{},"Prop",[544,548,549],{},"Type",[544,551,552],{},"Default",[544,554,555],{},"Description",[557,558,559,581,603,626,648,669,684,699,718,766,783,799,815,832,849,865,881,898],"tbody",{},[541,560,561,566,571,574],{},[562,563,564],"td",{},[187,565,305],{},[562,567,568],{},[187,569,570],{},"'top' | 'bottom' | 'left' | 'right' | 'center' | 'inside*' | { x, y }",[562,572,573],{},"—",[562,575,576,577,310,579],{},"Legend position; overrides ",[187,578,309],{},[187,580,313],{},[541,582,583,587,592,597],{},[562,584,585],{},[187,586,386],{},[562,588,589],{},[187,590,591],{},"number",[562,593,594],{},[187,595,596],{},"0",[562,598,599,600,602],{},"Gap along the ",[187,601,305],{}," direction",[541,604,605,609,614,618],{},[562,606,607],{},[187,608,434],{},[562,610,611],{},[187,612,613],{},"'horizontal' | 'vertical' | 'auto'",[562,615,616],{},[187,617,438],{},[562,619,620,621,623,624],{},"Layout direction; ",[187,622,438],{}," resolves from ",[187,625,305],{},[541,627,628,632,637,642],{},[562,629,630],{},[187,631,309],{},[562,633,634],{},[187,635,636],{},"'left' | 'center' | 'right'",[562,638,639],{},[187,640,641],{},"'center'",[562,643,644,645,647],{},"Horizontal alignment (legacy, use ",[187,646,305],{}," instead)",[541,649,650,654,659,664],{},[562,651,652],{},[187,653,313],{},[562,655,656],{},[187,657,658],{},"'top' | 'middle' | 'bottom'",[562,660,661],{},[187,662,663],{},"'bottom'",[562,665,666,667,647],{},"Vertical alignment (legacy, use ",[187,668,305],{},[541,670,671,675,679,681],{},[562,672,673],{},[187,674,224],{},[562,676,677],{},[187,678,591],{},[562,680,573],{},[562,682,683],{},"Fixed width",[541,685,686,690,694,696],{},[562,687,688],{},[187,689,241],{},[562,691,692],{},[187,693,591],{},[562,695,573],{},[562,697,698],{},"Fixed height",[541,700,701,706,710,715],{},[562,702,703],{},[187,704,705],{},"iconSize",[562,707,708],{},[187,709,591],{},[562,711,712],{},[187,713,714],{},"14",[562,716,717],{},"Size of the legend icon",[541,719,720,725,730,732],{},[562,721,722],{},[187,723,724],{},"iconType",[562,726,727],{},[187,728,729],{},"string",[562,731,573],{},[562,733,734,735,325,738,325,741,325,744,325,747,325,750,325,753,325,756,325,759,325,762,765],{},"Legend icon shape (",[187,736,737],{},"'line'",[187,739,740],{},"'plainline'",[187,742,743],{},"'square'",[187,745,746],{},"'rect'",[187,748,749],{},"'circle'",[187,751,752],{},"'cross'",[187,754,755],{},"'diamond'",[187,757,758],{},"'star'",[187,760,761],{},"'triangle'",[187,763,764],{},"'wye'",")",[541,767,768,773,778,780],{},[562,769,770],{},[187,771,772],{},"wrapperStyle",[562,774,775],{},[187,776,777],{},"CSSProperties",[562,779,573],{},[562,781,782],{},"Inline styles for the legend wrapper",[541,784,785,790,794,796],{},[562,786,787],{},[187,788,789],{},"contentStyle",[562,791,792],{},[187,793,777],{},[562,795,573],{},[562,797,798],{},"Inline styles for the content",[541,800,801,806,810,812],{},[562,802,803],{},[187,804,805],{},"itemStyle",[562,807,808],{},[187,809,777],{},[562,811,573],{},[562,813,814],{},"Inline styles for each legend item",[541,816,817,822,827,829],{},[562,818,819],{},[187,820,821],{},"formatter",[562,823,824],{},[187,825,826],{},"(value: string, entry: LegendPayload) => string",[562,828,573],{},[562,830,831],{},"Format legend label text",[541,833,834,839,844,846],{},[562,835,836],{},[187,837,838],{},"onClick",[562,840,841],{},[187,842,843],{},"(data: LegendPayload, index: number) => void",[562,845,573],{},[562,847,848],{},"Click handler",[541,850,851,856,860,862],{},[562,852,853],{},[187,854,855],{},"onMouseEnter",[562,857,858],{},[187,859,843],{},[562,861,573],{},[562,863,864],{},"Mouse enter handler",[541,866,867,872,876,878],{},[562,868,869],{},[187,870,871],{},"onMouseLeave",[562,873,874],{},[187,875,843],{},[562,877,573],{},[562,879,880],{},"Mouse leave handler",[541,882,883,888,893,895],{},[562,884,885],{},[187,886,887],{},"payloadUniqBy",[562,889,890],{},[187,891,892],{},"boolean | Function",[562,894,573],{},[562,896,897],{},"Deduplicate legend entries",[541,899,900,905,910,915],{},[562,901,902],{},[187,903,904],{},"itemSorter",[562,906,907],{},[187,908,909],{},"'value' | 'dataKey' | Function",[562,911,912],{},[187,913,914],{},"'value'",[562,916,917],{},"Sort legend entries",[192,919,921],{"id":920},"legend-slots","Legend slots",[535,923,924,936],{},[538,925,926],{},[541,927,928,931,934],{},[544,929,930],{},"Slot",[544,932,933],{},"Props",[544,935,555],{},[557,937,938],{},[541,939,940,944,949],{},[562,941,942],{},[187,943,462],{},[562,945,946],{},[187,947,948],{},"{ payload, layout, align, verticalAlign, ...props }",[562,950,951,952,955,956,959],{},"Custom legend content. ",[187,953,954],{},"payload"," is an array of ",[187,957,958],{},"{ value, color, type, dataKey }"," entries.",[961,962,963],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":202,"searchDepth":270,"depth":270,"links":965},[966,967,968,969,970],{"id":194,"depth":270,"text":195},{"id":298,"depth":270,"text":299},{"id":456,"depth":270,"text":457},{"id":532,"depth":270,"text":533},{"id":920,"depth":270,"text":921},"Add legends to identify chart series","md",null,{},{"icon":152},{"title":149,"description":971},"tjnksrySCwtCeO_zWZXg0kAca9_3jltJLhCUkVG_8fU",[979,981],{"title":144,"path":145,"stem":146,"description":980,"icon":147,"children":-1},"Configure tooltips for displaying data on hover",{"title":154,"path":155,"stem":156,"description":982,"icon":157,"children":-1},"Add grid lines to cartesian charts",1787651330536]