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