[{"data":1,"prerenderedAt":625},["ShallowReactive",2],{"navigation_docs":3,"-components-cartesian-grid":177,"-components-cartesian-grid-surround":620},[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":154,"body":179,"description":613,"extension":614,"links":615,"meta":616,"navigation":617,"path":155,"seo":618,"stem":156,"__hash__":619},"docs/4.components/3.cartesian-grid.md",{"type":180,"value":181,"toc":606},"minimark",[182,190,195,301,305,355,359,370,419,423,432,468,472,602],[183,184,185,189],"p",{},[186,187,188],"code",{},"\u003CCartesianGrid>"," renders horizontal and vertical grid lines behind chart content.",[191,192,194],"h2",{"id":193},"add-a-grid","Add a grid",[196,197,202],"pre",{"className":198,"code":199,"language":200,"meta":201,"style":201},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CAreaChart :width=\"500\" :height=\"300\" :data=\"data\">\n  \u003CCartesianGrid stroke-dasharray=\"3 3\" />\n  \u003CXAxis data-key=\"name\" />\n  \u003CYAxis />\n  \u003CArea data-key=\"value\" fill=\"#8884d8\" />\n\u003C/AreaChart>\n","vue","",[186,203,204,267,273,279,285,291],{"__ignoreMap":201},[205,206,209,213,217,220,224,227,230,234,236,238,241,243,245,248,250,252,255,257,259,262,264],"span",{"class":207,"line":208},"line",1,[205,210,212],{"class":211},"sMK4o","\u003C",[205,214,216],{"class":215},"swJcz","AreaChart",[205,218,219],{"class":211}," :",[205,221,223],{"class":222},"spNyl","width",[205,225,226],{"class":211},"=",[205,228,229],{"class":211},"\"",[205,231,233],{"class":232},"sbssI","500",[205,235,229],{"class":211},[205,237,219],{"class":211},[205,239,240],{"class":222},"height",[205,242,226],{"class":211},[205,244,229],{"class":211},[205,246,247],{"class":232},"300",[205,249,229],{"class":211},[205,251,219],{"class":211},[205,253,254],{"class":222},"data",[205,256,226],{"class":211},[205,258,229],{"class":211},[205,260,254],{"class":261},"sTEyZ",[205,263,229],{"class":211},[205,265,266],{"class":211},">\n",[205,268,270],{"class":207,"line":269},2,[205,271,272],{"class":261},"  \u003CCartesianGrid stroke-dasharray=\"3 3\" />\n",[205,274,276],{"class":207,"line":275},3,[205,277,278],{"class":261},"  \u003CXAxis data-key=\"name\" />\n",[205,280,282],{"class":207,"line":281},4,[205,283,284],{"class":261},"  \u003CYAxis />\n",[205,286,288],{"class":207,"line":287},5,[205,289,290],{"class":261},"  \u003CArea data-key=\"value\" fill=\"#8884d8\" />\n",[205,292,294,297,299],{"class":207,"line":293},6,[205,295,296],{"class":211},"\u003C/",[205,298,216],{"class":215},[205,300,266],{"class":211},[191,302,304],{"id":303},"hide-horizontal-or-vertical-lines","Hide horizontal or vertical lines",[196,306,308],{"className":198,"code":307,"language":200,"meta":201,"style":201},"\u003CCartesianGrid :horizontal=\"false\" />\n\u003CCartesianGrid :vertical=\"false\" />\n",[186,309,310,334],{"__ignoreMap":201},[205,311,312,314,316,318,321,323,325,329,331],{"class":207,"line":208},[205,313,212],{"class":211},[205,315,154],{"class":215},[205,317,219],{"class":211},[205,319,320],{"class":222},"horizontal",[205,322,226],{"class":211},[205,324,229],{"class":211},[205,326,328],{"class":327},"sfNiH","false",[205,330,229],{"class":211},[205,332,333],{"class":211}," />\n",[205,335,336,338,340,342,345,347,349,351,353],{"class":207,"line":269},[205,337,212],{"class":211},[205,339,154],{"class":215},[205,341,219],{"class":211},[205,343,344],{"class":222},"vertical",[205,346,226],{"class":211},[205,348,229],{"class":211},[205,350,328],{"class":327},[205,352,229],{"class":211},[205,354,333],{"class":211},[191,356,358],{"id":357},"add-stripe-fills","Add stripe fills",[183,360,361,362,365,366,369],{},"Use ",[186,363,364],{},"horizontal-fill"," or ",[186,367,368],{},"vertical-fill"," for alternating background colors:",[196,371,373],{"className":198,"code":372,"language":200,"meta":201,"style":201},"\u003CCartesianGrid :horizontal-fill=\"['#f5f5f5', '#fff']\" />\n",[186,374,375],{"__ignoreMap":201},[205,376,377,379,381,383,385,387,389,392,395,399,401,404,407,410,412,415,417],{"class":207,"line":208},[205,378,212],{"class":211},[205,380,154],{"class":215},[205,382,219],{"class":211},[205,384,364],{"class":222},[205,386,226],{"class":211},[205,388,229],{"class":211},[205,390,391],{"class":261},"[",[205,393,394],{"class":211},"'",[205,396,398],{"class":397},"sfazB","#f5f5f5",[205,400,394],{"class":211},[205,402,403],{"class":211},",",[205,405,406],{"class":211}," '",[205,408,409],{"class":397},"#fff",[205,411,394],{"class":211},[205,413,414],{"class":261},"]",[205,416,229],{"class":211},[205,418,333],{"class":211},[191,420,422],{"id":421},"customize-grid-lines-with-slots","Customize grid lines with slots",[183,424,361,425,365,428,431],{},[186,426,427],{},"#horizontal",[186,429,430],{},"#vertical"," slots for custom line rendering:",[196,433,435],{"className":198,"code":434,"language":200,"meta":201,"style":201},"\u003CCartesianGrid>\n  \u003Ctemplate #horizontal=\"props\">\n    \u003Cline v-bind=\"props\" stroke=\"#eee\" stroke-dasharray=\"5 5\" />\n  \u003C/template>\n\u003C/CartesianGrid>\n",[186,436,437,445,450,455,460],{"__ignoreMap":201},[205,438,439,441,443],{"class":207,"line":208},[205,440,212],{"class":211},[205,442,154],{"class":215},[205,444,266],{"class":211},[205,446,447],{"class":207,"line":269},[205,448,449],{"class":261},"  \u003Ctemplate #horizontal=\"props\">\n",[205,451,452],{"class":207,"line":275},[205,453,454],{"class":261},"    \u003Cline v-bind=\"props\" stroke=\"#eee\" stroke-dasharray=\"5 5\" />\n",[205,456,457],{"class":207,"line":281},[205,458,459],{"class":261},"  \u003C/template>\n",[205,461,462,464,466],{"class":207,"line":287},[205,463,296],{"class":211},[205,465,154],{"class":215},[205,467,266],{"class":211},[191,469,471],{"id":470},"cartesiangrid-props","CartesianGrid props",[473,474,475,494],"table",{},[476,477,478],"thead",{},[479,480,481,485,488,491],"tr",{},[482,483,484],"th",{},"Prop",[482,486,487],{},"Type",[482,489,490],{},"Default",[482,492,493],{},"Description",[495,496,497,517,534,552,568,585],"tbody",{},[479,498,499,504,509,514],{},[500,501,502],"td",{},[186,503,320],{},[500,505,506],{},[186,507,508],{},"boolean | object",[500,510,511],{},[186,512,513],{},"true",[500,515,516],{},"Show horizontal lines",[479,518,519,523,527,531],{},[500,520,521],{},[186,522,344],{},[500,524,525],{},[186,526,508],{},[500,528,529],{},[186,530,513],{},[500,532,533],{},"Show vertical lines",[479,535,536,541,546,549],{},[500,537,538],{},[186,539,540],{},"horizontalFill",[500,542,543],{},[186,544,545],{},"string[]",[500,547,548],{},"—",[500,550,551],{},"Alternating horizontal stripe colors",[479,553,554,559,563,565],{},[500,555,556],{},[186,557,558],{},"verticalFill",[500,560,561],{},[186,562,545],{},[500,564,548],{},[500,566,567],{},"Alternating vertical stripe colors",[479,569,570,575,580,582],{},[500,571,572],{},[186,573,574],{},"strokeDasharray",[500,576,577],{},[186,578,579],{},"string",[500,581,548],{},[500,583,584],{},"Dash pattern for grid lines",[479,586,587,592,597,599],{},[500,588,589],{},[186,590,591],{},"syncWithTicks",[500,593,594],{},[186,595,596],{},"boolean",[500,598,548],{},[500,600,601],{},"Align grid lines with axis ticks",[603,604,605],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":201,"searchDepth":269,"depth":269,"links":607},[608,609,610,611,612],{"id":193,"depth":269,"text":194},{"id":303,"depth":269,"text":304},{"id":357,"depth":269,"text":358},{"id":421,"depth":269,"text":422},{"id":470,"depth":269,"text":471},"Add grid lines to cartesian charts","md",null,{},{"icon":157},{"title":154,"description":613},"kzchOJnTiAHQDy4UZNv3_W9Rd4PrTOr4ucSfPkDx_Ss",[621,623],{"title":149,"path":150,"stem":151,"description":622,"icon":152,"children":-1},"Add legends to identify chart series",{"title":159,"path":160,"stem":161,"description":624,"icon":162,"children":-1},"Configure X and Y axes for cartesian charts",1775929456717]