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