[{"data":1,"prerenderedAt":774},["ShallowReactive",2],{"navigation_docs":3,"-components-legend":172,"-components-legend-surround":769},[4,21,77,132],{"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],{"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},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":99,"path":100,"stem":101,"icon":102},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":104,"path":105,"stem":106,"icon":107},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":109,"path":110,"stem":111,"icon":112},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":114,"path":115,"stem":116,"icon":117},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":119,"path":120,"stem":121,"icon":122},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":124,"path":125,"stem":126,"icon":127},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":129,"path":130,"stem":131,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":20},"Components","i-lucide-code","/components","4.components",[138,143,148,153,158,162,167],{"title":139,"path":140,"stem":141,"icon":142},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":144,"path":145,"stem":146,"icon":147},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":149,"path":150,"stem":151,"icon":152},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":154,"path":155,"stem":156,"icon":157},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":159,"path":160,"stem":161,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":163,"path":164,"stem":165,"icon":166},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":168,"path":169,"stem":170,"icon":171},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":173,"title":144,"body":174,"description":762,"extension":763,"links":764,"meta":765,"navigation":766,"path":145,"seo":767,"stem":146,"__hash__":768},"docs/4.components/2.legend.md",{"type":175,"value":176,"toc":756},"minimark",[177,186,191,291,295,302,368,372,710,714,752],[178,179,180,181,185],"p",{},"The ",[182,183,184],"code",{},"\u003CLegend>"," component displays a legend identifying chart series by color and label.",[187,188,190],"h2",{"id":189},"add-a-legend","Add a legend",[192,193,198],"pre",{"className":194,"code":195,"language":196,"meta":197,"style":197},"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","",[182,199,200,263,269,275,281],{"__ignoreMap":197},[201,202,205,209,213,216,220,223,226,230,232,234,237,239,241,244,246,248,251,253,255,258,260],"span",{"class":203,"line":204},"line",1,[201,206,208],{"class":207},"sMK4o","\u003C",[201,210,212],{"class":211},"swJcz","BarChart",[201,214,215],{"class":207}," :",[201,217,219],{"class":218},"spNyl","width",[201,221,222],{"class":207},"=",[201,224,225],{"class":207},"\"",[201,227,229],{"class":228},"sbssI","500",[201,231,225],{"class":207},[201,233,215],{"class":207},[201,235,236],{"class":218},"height",[201,238,222],{"class":207},[201,240,225],{"class":207},[201,242,243],{"class":228},"300",[201,245,225],{"class":207},[201,247,215],{"class":207},[201,249,250],{"class":218},"data",[201,252,222],{"class":207},[201,254,225],{"class":207},[201,256,250],{"class":257},"sTEyZ",[201,259,225],{"class":207},[201,261,262],{"class":207},">\n",[201,264,266],{"class":203,"line":265},2,[201,267,268],{"class":257},"  \u003CBar data-key=\"desktop\" fill=\"#8884d8\" />\n",[201,270,272],{"class":203,"line":271},3,[201,273,274],{"class":257},"  \u003CBar data-key=\"mobile\" fill=\"#82ca9d\" />\n",[201,276,278],{"class":203,"line":277},4,[201,279,280],{"class":257},"  \u003CLegend />\n",[201,282,284,287,289],{"class":203,"line":283},5,[201,285,286],{"class":207},"\u003C/",[201,288,212],{"class":211},[201,290,262],{"class":207},[187,292,294],{"id":293},"customize-legend-content","Customize legend content",[178,296,297,298,301],{},"Use the ",[182,299,300],{},"#content"," slot:",[192,303,305],{"className":194,"code":304,"language":196,"meta":197,"style":197},"\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",[182,306,307,315,320,325,330,335,341,347,353,359],{"__ignoreMap":197},[201,308,309,311,313],{"class":203,"line":204},[201,310,208],{"class":207},[201,312,144],{"class":211},[201,314,262],{"class":207},[201,316,317],{"class":203,"line":265},[201,318,319],{"class":257},"  \u003Ctemplate #content=\"legendProps\">\n",[201,321,322],{"class":203,"line":271},[201,323,324],{"class":257},"    \u003Cdiv class=\"flex gap-4 justify-center\">\n",[201,326,327],{"class":203,"line":277},[201,328,329],{"class":257},"      \u003Cspan v-for=\"entry in legendProps.payload\" :key=\"entry.value\" class=\"flex items-center gap-1\">\n",[201,331,332],{"class":203,"line":283},[201,333,334],{"class":257},"        \u003Cspan class=\"w-3 h-3 rounded-full\" :style=\"{ backgroundColor: entry.color }\" />\n",[201,336,338],{"class":203,"line":337},6,[201,339,340],{"class":257},"        {{ entry.value }}\n",[201,342,344],{"class":203,"line":343},7,[201,345,346],{"class":257},"      \u003C/span>\n",[201,348,350],{"class":203,"line":349},8,[201,351,352],{"class":257},"    \u003C/div>\n",[201,354,356],{"class":203,"line":355},9,[201,357,358],{"class":257},"  \u003C/template>\n",[201,360,362,364,366],{"class":203,"line":361},10,[201,363,286],{"class":207},[201,365,144],{"class":211},[201,367,262],{"class":207},[187,369,371],{"id":370},"legend-props","Legend props",[373,374,375,394],"table",{},[376,377,378],"thead",{},[379,380,381,385,388,391],"tr",{},[382,383,384],"th",{},"Prop",[382,386,387],{},"Type",[382,389,390],{},"Default",[382,392,393],{},"Description",[395,396,397,418,438,458,475,490,509,558,575,591,607,624,641,657,673,690],"tbody",{},[379,398,399,405,410,415],{},[400,401,402],"td",{},[182,403,404],{},"layout",[400,406,407],{},[182,408,409],{},"'horizontal' | 'vertical'",[400,411,412],{},[182,413,414],{},"'horizontal'",[400,416,417],{},"Layout direction",[379,419,420,425,430,435],{},[400,421,422],{},[182,423,424],{},"align",[400,426,427],{},[182,428,429],{},"'left' | 'center' | 'right'",[400,431,432],{},[182,433,434],{},"'center'",[400,436,437],{},"Horizontal alignment",[379,439,440,445,450,455],{},[400,441,442],{},[182,443,444],{},"verticalAlign",[400,446,447],{},[182,448,449],{},"'top' | 'middle' | 'bottom'",[400,451,452],{},[182,453,454],{},"'bottom'",[400,456,457],{},"Vertical alignment",[379,459,460,464,469,472],{},[400,461,462],{},[182,463,219],{},[400,465,466],{},[182,467,468],{},"number",[400,470,471],{},"—",[400,473,474],{},"Fixed width",[379,476,477,481,485,487],{},[400,478,479],{},[182,480,236],{},[400,482,483],{},[182,484,468],{},[400,486,471],{},[400,488,489],{},"Fixed height",[379,491,492,497,501,506],{},[400,493,494],{},[182,495,496],{},"iconSize",[400,498,499],{},[182,500,468],{},[400,502,503],{},[182,504,505],{},"14",[400,507,508],{},"Size of the legend icon",[379,510,511,516,521,523],{},[400,512,513],{},[182,514,515],{},"iconType",[400,517,518],{},[182,519,520],{},"string",[400,522,471],{},[400,524,525,526,529,530,529,533,529,536,529,539,529,542,529,545,529,548,529,551,529,554,557],{},"Legend icon shape (",[182,527,528],{},"'line'",", ",[182,531,532],{},"'plainline'",[182,534,535],{},"'square'",[182,537,538],{},"'rect'",[182,540,541],{},"'circle'",[182,543,544],{},"'cross'",[182,546,547],{},"'diamond'",[182,549,550],{},"'star'",[182,552,553],{},"'triangle'",[182,555,556],{},"'wye'",")",[379,559,560,565,570,572],{},[400,561,562],{},[182,563,564],{},"wrapperStyle",[400,566,567],{},[182,568,569],{},"CSSProperties",[400,571,471],{},[400,573,574],{},"Inline styles for the legend wrapper",[379,576,577,582,586,588],{},[400,578,579],{},[182,580,581],{},"contentStyle",[400,583,584],{},[182,585,569],{},[400,587,471],{},[400,589,590],{},"Inline styles for the content",[379,592,593,598,602,604],{},[400,594,595],{},[182,596,597],{},"itemStyle",[400,599,600],{},[182,601,569],{},[400,603,471],{},[400,605,606],{},"Inline styles for each legend item",[379,608,609,614,619,621],{},[400,610,611],{},[182,612,613],{},"formatter",[400,615,616],{},[182,617,618],{},"(value: string, entry: LegendPayload) => string",[400,620,471],{},[400,622,623],{},"Format legend label text",[379,625,626,631,636,638],{},[400,627,628],{},[182,629,630],{},"onClick",[400,632,633],{},[182,634,635],{},"(data: LegendPayload, index: number) => void",[400,637,471],{},[400,639,640],{},"Click handler",[379,642,643,648,652,654],{},[400,644,645],{},[182,646,647],{},"onMouseEnter",[400,649,650],{},[182,651,635],{},[400,653,471],{},[400,655,656],{},"Mouse enter handler",[379,658,659,664,668,670],{},[400,660,661],{},[182,662,663],{},"onMouseLeave",[400,665,666],{},[182,667,635],{},[400,669,471],{},[400,671,672],{},"Mouse leave handler",[379,674,675,680,685,687],{},[400,676,677],{},[182,678,679],{},"payloadUniqBy",[400,681,682],{},[182,683,684],{},"boolean | Function",[400,686,471],{},[400,688,689],{},"Deduplicate legend entries",[379,691,692,697,702,707],{},[400,693,694],{},[182,695,696],{},"itemSorter",[400,698,699],{},[182,700,701],{},"'value' | 'dataKey' | Function",[400,703,704],{},[182,705,706],{},"'value'",[400,708,709],{},"Sort legend entries",[187,711,713],{"id":712},"legend-slots","Legend slots",[373,715,716,728],{},[376,717,718],{},[379,719,720,723,726],{},[382,721,722],{},"Slot",[382,724,725],{},"Props",[382,727,393],{},[395,729,730],{},[379,731,732,736,741],{},[400,733,734],{},[182,735,300],{},[400,737,738],{},[182,739,740],{},"{ payload, layout, align, verticalAlign, ...props }",[400,742,743,744,747,748,751],{},"Custom legend content. ",[182,745,746],{},"payload"," is an array of ",[182,749,750],{},"{ value, color, type, dataKey }"," entries.",[753,754,755],"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":197,"searchDepth":265,"depth":265,"links":757},[758,759,760,761],{"id":189,"depth":265,"text":190},{"id":293,"depth":265,"text":294},{"id":370,"depth":265,"text":371},{"id":712,"depth":265,"text":713},"Add legends to identify chart series","md",null,{},{"icon":147},{"title":144,"description":762},"1gvjVmxYN2EQGcu_UelGHvCDUTGJswSG-3rPAoq7xWY",[770,772],{"title":139,"path":140,"stem":141,"description":771,"icon":142,"children":-1},"Configure tooltips for displaying data on hover",{"title":149,"path":150,"stem":151,"description":773,"icon":152,"children":-1},"Add grid lines to cartesian charts",1775472914533]