[{"data":1,"prerenderedAt":779},["ShallowReactive",2],{"navigation_docs":3,"-components-legend":177,"-components-legend-surround":774},[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":767,"extension":768,"links":769,"meta":770,"navigation":771,"path":150,"seo":772,"stem":151,"__hash__":773},"docs/4.components/2.legend.md",{"type":180,"value":181,"toc":761},"minimark",[182,191,196,296,300,307,373,377,715,719,757],[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},"customize-legend-content","Customize legend content",[183,301,302,303,306],{},"Use the ",[187,304,305],{},"#content"," slot:",[197,308,310],{"className":199,"code":309,"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,311,312,320,325,330,335,340,346,352,358,364],{"__ignoreMap":202},[206,313,314,316,318],{"class":208,"line":209},[206,315,213],{"class":212},[206,317,149],{"class":216},[206,319,267],{"class":212},[206,321,322],{"class":208,"line":270},[206,323,324],{"class":262},"  \u003Ctemplate #content=\"legendProps\">\n",[206,326,327],{"class":208,"line":276},[206,328,329],{"class":262},"    \u003Cdiv class=\"flex gap-4 justify-center\">\n",[206,331,332],{"class":208,"line":282},[206,333,334],{"class":262},"      \u003Cspan v-for=\"entry in legendProps.payload\" :key=\"entry.value\" class=\"flex items-center gap-1\">\n",[206,336,337],{"class":208,"line":288},[206,338,339],{"class":262},"        \u003Cspan class=\"w-3 h-3 rounded-full\" :style=\"{ backgroundColor: entry.color }\" />\n",[206,341,343],{"class":208,"line":342},6,[206,344,345],{"class":262},"        {{ entry.value }}\n",[206,347,349],{"class":208,"line":348},7,[206,350,351],{"class":262},"      \u003C/span>\n",[206,353,355],{"class":208,"line":354},8,[206,356,357],{"class":262},"    \u003C/div>\n",[206,359,361],{"class":208,"line":360},9,[206,362,363],{"class":262},"  \u003C/template>\n",[206,365,367,369,371],{"class":208,"line":366},10,[206,368,291],{"class":212},[206,370,149],{"class":216},[206,372,267],{"class":212},[192,374,376],{"id":375},"legend-props","Legend props",[378,379,380,399],"table",{},[381,382,383],"thead",{},[384,385,386,390,393,396],"tr",{},[387,388,389],"th",{},"Prop",[387,391,392],{},"Type",[387,394,395],{},"Default",[387,397,398],{},"Description",[400,401,402,423,443,463,480,495,514,563,580,596,612,629,646,662,678,695],"tbody",{},[384,403,404,410,415,420],{},[405,406,407],"td",{},[187,408,409],{},"layout",[405,411,412],{},[187,413,414],{},"'horizontal' | 'vertical'",[405,416,417],{},[187,418,419],{},"'horizontal'",[405,421,422],{},"Layout direction",[384,424,425,430,435,440],{},[405,426,427],{},[187,428,429],{},"align",[405,431,432],{},[187,433,434],{},"'left' | 'center' | 'right'",[405,436,437],{},[187,438,439],{},"'center'",[405,441,442],{},"Horizontal alignment",[384,444,445,450,455,460],{},[405,446,447],{},[187,448,449],{},"verticalAlign",[405,451,452],{},[187,453,454],{},"'top' | 'middle' | 'bottom'",[405,456,457],{},[187,458,459],{},"'bottom'",[405,461,462],{},"Vertical alignment",[384,464,465,469,474,477],{},[405,466,467],{},[187,468,224],{},[405,470,471],{},[187,472,473],{},"number",[405,475,476],{},"—",[405,478,479],{},"Fixed width",[384,481,482,486,490,492],{},[405,483,484],{},[187,485,241],{},[405,487,488],{},[187,489,473],{},[405,491,476],{},[405,493,494],{},"Fixed height",[384,496,497,502,506,511],{},[405,498,499],{},[187,500,501],{},"iconSize",[405,503,504],{},[187,505,473],{},[405,507,508],{},[187,509,510],{},"14",[405,512,513],{},"Size of the legend icon",[384,515,516,521,526,528],{},[405,517,518],{},[187,519,520],{},"iconType",[405,522,523],{},[187,524,525],{},"string",[405,527,476],{},[405,529,530,531,534,535,534,538,534,541,534,544,534,547,534,550,534,553,534,556,534,559,562],{},"Legend icon shape (",[187,532,533],{},"'line'",", ",[187,536,537],{},"'plainline'",[187,539,540],{},"'square'",[187,542,543],{},"'rect'",[187,545,546],{},"'circle'",[187,548,549],{},"'cross'",[187,551,552],{},"'diamond'",[187,554,555],{},"'star'",[187,557,558],{},"'triangle'",[187,560,561],{},"'wye'",")",[384,564,565,570,575,577],{},[405,566,567],{},[187,568,569],{},"wrapperStyle",[405,571,572],{},[187,573,574],{},"CSSProperties",[405,576,476],{},[405,578,579],{},"Inline styles for the legend wrapper",[384,581,582,587,591,593],{},[405,583,584],{},[187,585,586],{},"contentStyle",[405,588,589],{},[187,590,574],{},[405,592,476],{},[405,594,595],{},"Inline styles for the content",[384,597,598,603,607,609],{},[405,599,600],{},[187,601,602],{},"itemStyle",[405,604,605],{},[187,606,574],{},[405,608,476],{},[405,610,611],{},"Inline styles for each legend item",[384,613,614,619,624,626],{},[405,615,616],{},[187,617,618],{},"formatter",[405,620,621],{},[187,622,623],{},"(value: string, entry: LegendPayload) => string",[405,625,476],{},[405,627,628],{},"Format legend label text",[384,630,631,636,641,643],{},[405,632,633],{},[187,634,635],{},"onClick",[405,637,638],{},[187,639,640],{},"(data: LegendPayload, index: number) => void",[405,642,476],{},[405,644,645],{},"Click handler",[384,647,648,653,657,659],{},[405,649,650],{},[187,651,652],{},"onMouseEnter",[405,654,655],{},[187,656,640],{},[405,658,476],{},[405,660,661],{},"Mouse enter handler",[384,663,664,669,673,675],{},[405,665,666],{},[187,667,668],{},"onMouseLeave",[405,670,671],{},[187,672,640],{},[405,674,476],{},[405,676,677],{},"Mouse leave handler",[384,679,680,685,690,692],{},[405,681,682],{},[187,683,684],{},"payloadUniqBy",[405,686,687],{},[187,688,689],{},"boolean | Function",[405,691,476],{},[405,693,694],{},"Deduplicate legend entries",[384,696,697,702,707,712],{},[405,698,699],{},[187,700,701],{},"itemSorter",[405,703,704],{},[187,705,706],{},"'value' | 'dataKey' | Function",[405,708,709],{},[187,710,711],{},"'value'",[405,713,714],{},"Sort legend entries",[192,716,718],{"id":717},"legend-slots","Legend slots",[378,720,721,733],{},[381,722,723],{},[384,724,725,728,731],{},[387,726,727],{},"Slot",[387,729,730],{},"Props",[387,732,398],{},[400,734,735],{},[384,736,737,741,746],{},[405,738,739],{},[187,740,305],{},[405,742,743],{},[187,744,745],{},"{ payload, layout, align, verticalAlign, ...props }",[405,747,748,749,752,753,756],{},"Custom legend content. ",[187,750,751],{},"payload"," is an array of ",[187,754,755],{},"{ value, color, type, dataKey }"," entries.",[758,759,760],"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);}",{"title":202,"searchDepth":270,"depth":270,"links":762},[763,764,765,766],{"id":194,"depth":270,"text":195},{"id":298,"depth":270,"text":299},{"id":375,"depth":270,"text":376},{"id":717,"depth":270,"text":718},"Add legends to identify chart series","md",null,{},{"icon":152},{"title":149,"description":767},"1gvjVmxYN2EQGcu_UelGHvCDUTGJswSG-3rPAoq7xWY",[775,777],{"title":144,"path":145,"stem":146,"description":776,"icon":147,"children":-1},"Configure tooltips for displaying data on hover",{"title":154,"path":155,"stem":156,"description":778,"icon":157,"children":-1},"Add grid lines to cartesian charts",1775929455962]