[{"data":1,"prerenderedAt":790},["ShallowReactive",2],{"navigation_docs":3,"-components-cartesian-grid":279,"-components-cartesian-grid-surround":785},[4,26,112,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Migrate from 0.6","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F3.migration","i-lucide-arrow-up-circle",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[32,37,42,47,52,57,62,67,72,77,82,87,92,97,102,107],{"title":33,"path":34,"stem":35,"icon":36},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":38,"path":39,"stem":40,"icon":41},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":48,"path":49,"stem":50,"icon":51},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":53,"path":54,"stem":55,"icon":56},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":58,"path":59,"stem":60,"icon":61},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":63,"path":64,"stem":65,"icon":66},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":68,"path":69,"stem":70,"icon":71},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":73,"path":74,"stem":75,"icon":76},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":78,"path":79,"stem":80,"icon":81},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":83,"path":84,"stem":85,"icon":86},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":88,"path":89,"stem":90,"icon":91},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":93,"path":94,"stem":95,"icon":96},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":98,"path":99,"stem":100,"icon":101},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":103,"path":104,"stem":105,"icon":106},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":108,"path":109,"stem":110,"icon":111},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":113,"icon":114,"path":115,"stem":116,"children":117,"page":25},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[118,123,128,133,138,143,148,153,158,163,167,172,177,182,187,192,197,201,206],{"title":119,"path":120,"stem":121,"icon":122},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":124,"path":125,"stem":126,"icon":127},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":129,"path":130,"stem":131,"icon":132},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":134,"path":135,"stem":136,"icon":137},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":139,"path":140,"stem":141,"icon":142},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":144,"path":145,"stem":146,"icon":147},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":149,"path":150,"stem":151,"icon":152},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":154,"path":155,"stem":156,"icon":157},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":159,"path":160,"stem":161,"icon":162},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":164,"path":165,"stem":166,"icon":51},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":168,"path":169,"stem":170,"icon":171},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":173,"path":174,"stem":175,"icon":176},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":178,"path":179,"stem":180,"icon":181},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":183,"path":184,"stem":185,"icon":186},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":188,"path":189,"stem":190,"icon":191},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":193,"path":194,"stem":195,"icon":196},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":198,"path":199,"stem":200,"icon":137},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":202,"path":203,"stem":204,"icon":205},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":207,"path":208,"stem":209,"icon":210},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":25},"Components","i-lucide-code","\u002Fcomponents","4.components",[217,222,227,231,236,240,245,249,254,259,264,269,274],{"title":218,"path":219,"stem":220,"icon":221},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":223,"path":224,"stem":225,"icon":226},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":228,"path":229,"stem":230,"icon":196},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":232,"path":233,"stem":234,"icon":235},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":237,"path":238,"stem":239,"icon":147},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":241,"path":242,"stem":243,"icon":244},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":246,"path":247,"stem":248,"icon":56},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":250,"path":251,"stem":252,"icon":253},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":255,"path":256,"stem":257,"icon":258},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":260,"path":261,"stem":262,"icon":263},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":265,"path":266,"stem":267,"icon":268},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":270,"path":271,"stem":272,"icon":273},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":275,"path":276,"stem":277,"icon":278},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":280,"title":228,"body":281,"description":778,"extension":779,"links":780,"meta":781,"navigation":782,"path":229,"seo":783,"stem":230,"__hash__":784},"docs\u002F4.components\u002F03.cartesian-grid.md",{"type":282,"value":283,"toc":770},"minimark",[284,292,297,403,407,463,467,478,527,531,540,576,580,708,712,759,766],[285,286,287,291],"p",{},[288,289,290],"code",{},"\u003CCartesianGrid>"," renders horizontal and vertical grid lines behind chart content.",[293,294,296],"h2",{"id":295},"add-a-grid","Add a grid",[298,299,304],"pre",{"className":300,"code":301,"language":302,"meta":303,"style":303},"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\" \u002F>\n  \u003CXAxis data-key=\"name\" \u002F>\n  \u003CYAxis \u002F>\n  \u003CArea data-key=\"value\" fill=\"#8884d8\" \u002F>\n\u003C\u002FAreaChart>\n","vue","",[288,305,306,369,375,381,387,393],{"__ignoreMap":303},[307,308,311,315,319,322,326,329,332,336,338,340,343,345,347,350,352,354,357,359,361,364,366],"span",{"class":309,"line":310},"line",1,[307,312,314],{"class":313},"sMK4o","\u003C",[307,316,318],{"class":317},"swJcz","AreaChart",[307,320,321],{"class":313}," :",[307,323,325],{"class":324},"spNyl","width",[307,327,328],{"class":313},"=",[307,330,331],{"class":313},"\"",[307,333,335],{"class":334},"sbssI","500",[307,337,331],{"class":313},[307,339,321],{"class":313},[307,341,342],{"class":324},"height",[307,344,328],{"class":313},[307,346,331],{"class":313},[307,348,349],{"class":334},"300",[307,351,331],{"class":313},[307,353,321],{"class":313},[307,355,356],{"class":324},"data",[307,358,328],{"class":313},[307,360,331],{"class":313},[307,362,356],{"class":363},"sTEyZ",[307,365,331],{"class":313},[307,367,368],{"class":313},">\n",[307,370,372],{"class":309,"line":371},2,[307,373,374],{"class":363},"  \u003CCartesianGrid stroke-dasharray=\"3 3\" \u002F>\n",[307,376,378],{"class":309,"line":377},3,[307,379,380],{"class":363},"  \u003CXAxis data-key=\"name\" \u002F>\n",[307,382,384],{"class":309,"line":383},4,[307,385,386],{"class":363},"  \u003CYAxis \u002F>\n",[307,388,390],{"class":309,"line":389},5,[307,391,392],{"class":363},"  \u003CArea data-key=\"value\" fill=\"#8884d8\" \u002F>\n",[307,394,396,399,401],{"class":309,"line":395},6,[307,397,398],{"class":313},"\u003C\u002F",[307,400,318],{"class":317},[307,402,368],{"class":313},[293,404,406],{"id":405},"hide-horizontal-or-vertical-lines","Hide horizontal or vertical lines",[298,408,410],{"className":300,"code":409,"language":302,"meta":303,"style":303},"\u003CCartesianGrid :horizontal=\"false\" \u002F>\n\n\u003CCartesianGrid :vertical=\"false\" \u002F>\n",[288,411,412,436,442],{"__ignoreMap":303},[307,413,414,416,418,420,423,425,427,431,433],{"class":309,"line":310},[307,415,314],{"class":313},[307,417,228],{"class":317},[307,419,321],{"class":313},[307,421,422],{"class":324},"horizontal",[307,424,328],{"class":313},[307,426,331],{"class":313},[307,428,430],{"class":429},"sfNiH","false",[307,432,331],{"class":313},[307,434,435],{"class":313}," \u002F>\n",[307,437,438],{"class":309,"line":371},[307,439,441],{"emptyLinePlaceholder":440},true,"\n",[307,443,444,446,448,450,453,455,457,459,461],{"class":309,"line":377},[307,445,314],{"class":313},[307,447,228],{"class":317},[307,449,321],{"class":313},[307,451,452],{"class":324},"vertical",[307,454,328],{"class":313},[307,456,331],{"class":313},[307,458,430],{"class":429},[307,460,331],{"class":313},[307,462,435],{"class":313},[293,464,466],{"id":465},"add-stripe-fills","Add stripe fills",[285,468,469,470,473,474,477],{},"Use ",[288,471,472],{},"horizontal-fill"," or ",[288,475,476],{},"vertical-fill"," for alternating background colors:",[298,479,481],{"className":300,"code":480,"language":302,"meta":303,"style":303},"\u003CCartesianGrid :horizontal-fill=\"['#f5f5f5', '#fff']\" \u002F>\n",[288,482,483],{"__ignoreMap":303},[307,484,485,487,489,491,493,495,497,500,503,507,509,512,515,518,520,523,525],{"class":309,"line":310},[307,486,314],{"class":313},[307,488,228],{"class":317},[307,490,321],{"class":313},[307,492,472],{"class":324},[307,494,328],{"class":313},[307,496,331],{"class":313},[307,498,499],{"class":363},"[",[307,501,502],{"class":313},"'",[307,504,506],{"class":505},"sfazB","#f5f5f5",[307,508,502],{"class":313},[307,510,511],{"class":313},",",[307,513,514],{"class":313}," '",[307,516,517],{"class":505},"#fff",[307,519,502],{"class":313},[307,521,522],{"class":363},"]",[307,524,331],{"class":313},[307,526,435],{"class":313},[293,528,530],{"id":529},"customize-grid-lines-with-slots","Customize grid lines with slots",[285,532,469,533,473,536,539],{},[288,534,535],{},"#horizontal",[288,537,538],{},"#vertical"," slots for custom line rendering:",[298,541,543],{"className":300,"code":542,"language":302,"meta":303,"style":303},"\u003CCartesianGrid>\n  \u003Ctemplate #horizontal=\"props\">\n    \u003Cline v-bind=\"props\" stroke=\"#eee\" stroke-dasharray=\"5 5\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FCartesianGrid>\n",[288,544,545,553,558,563,568],{"__ignoreMap":303},[307,546,547,549,551],{"class":309,"line":310},[307,548,314],{"class":313},[307,550,228],{"class":317},[307,552,368],{"class":313},[307,554,555],{"class":309,"line":371},[307,556,557],{"class":363},"  \u003Ctemplate #horizontal=\"props\">\n",[307,559,560],{"class":309,"line":377},[307,561,562],{"class":363},"    \u003Cline v-bind=\"props\" stroke=\"#eee\" stroke-dasharray=\"5 5\" \u002F>\n",[307,564,565],{"class":309,"line":383},[307,566,567],{"class":363},"  \u003C\u002Ftemplate>\n",[307,569,570,572,574],{"class":309,"line":389},[307,571,398],{"class":313},[307,573,228],{"class":317},[307,575,368],{"class":313},[293,577,579],{"id":578},"cartesiangrid-props","CartesianGrid props",[581,582,583,602],"table",{},[584,585,586],"thead",{},[587,588,589,593,596,599],"tr",{},[590,591,592],"th",{},"Prop",[590,594,595],{},"Type",[590,597,598],{},"Default",[590,600,601],{},"Description",[603,604,605,625,642,659,674,691],"tbody",{},[587,606,607,612,617,622],{},[608,609,610],"td",{},[288,611,422],{},[608,613,614],{},[288,615,616],{},"boolean | object",[608,618,619],{},[288,620,621],{},"true",[608,623,624],{},"Show horizontal lines",[587,626,627,631,635,639],{},[608,628,629],{},[288,630,452],{},[608,632,633],{},[288,634,616],{},[608,636,637],{},[288,638,621],{},[608,640,641],{},"Show vertical lines",[587,643,644,648,653,656],{},[608,645,646],{},[288,647,472],{},[608,649,650],{},[288,651,652],{},"string[]",[608,654,655],{},"—",[608,657,658],{},"Alternating horizontal stripe colors",[587,660,661,665,669,671],{},[608,662,663],{},[288,664,476],{},[608,666,667],{},[288,668,652],{},[608,670,655],{},[608,672,673],{},"Alternating vertical stripe colors",[587,675,676,681,686,688],{},[608,677,678],{},[288,679,680],{},"stroke-dasharray",[608,682,683],{},[288,684,685],{},"string",[608,687,655],{},[608,689,690],{},"Dash pattern for grid lines",[587,692,693,698,703,705],{},[608,694,695],{},[288,696,697],{},"sync-with-ticks",[608,699,700],{},[288,701,702],{},"boolean",[608,704,655],{},[608,706,707],{},"Align grid lines with axis ticks",[293,709,711],{"id":710},"cartesiangrid-slots","CartesianGrid slots",[581,713,714,726],{},[584,715,716],{},[587,717,718,721,724],{},[590,719,720],{},"Slot",[590,722,723],{},"Props",[590,725,601],{},[603,727,728],{},[587,729,730,737,742],{},[608,731,732,734,735],{},[288,733,535],{}," \u002F ",[288,736,538],{},[608,738,739],{},[288,740,741],{},"CartesianGridLineSlotProps",[608,743,744,745,748,749,748,752,748,755,758],{},"Line endpoints (",[288,746,747],{},"x1",", ",[288,750,751],{},"y1",[288,753,754],{},"x2",[288,756,757],{},"y2","), index and SVG attributes",[285,760,761,762,765],{},"Both slots are optional and return ",[288,763,764],{},"VNodeChild",".",[767,768,769],"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":303,"searchDepth":371,"depth":371,"links":771},[772,773,774,775,776,777],{"id":295,"depth":371,"text":296},{"id":405,"depth":371,"text":406},{"id":465,"depth":371,"text":466},{"id":529,"depth":371,"text":530},{"id":578,"depth":371,"text":579},{"id":710,"depth":371,"text":711},"Add grid lines to cartesian charts","md",null,{},{"icon":196},{"title":228,"description":778},"27a7UpuCko9SN1Q3IeDTXsJnULNRsShYtxaRT-msn4c",[786,788],{"title":223,"path":224,"stem":225,"description":787,"icon":226,"children":-1},"Add legends to identify chart series",{"title":232,"path":233,"stem":234,"description":789,"icon":235,"children":-1},"Configure X and Y axes for cartesian charts",1791811115550]