[{"data":1,"prerenderedAt":829},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-introduction":172,"-getting-started-introduction-surround":826},[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":11,"body":174,"description":819,"extension":820,"links":821,"meta":822,"navigation":823,"path":12,"seo":824,"stem":13,"__hash__":825},"docs/1.getting-started/1.introduction.md",{"type":175,"value":176,"toc":813},"minimark",[177,193,198,217,221,258,262,265,279,283,809],[178,179,180,184,185,192],"p",{},[181,182,183],"strong",{},"vccs"," (Vue Charts Components) is an unofficial Vue 3 port of ",[186,187,191],"a",{"href":188,"rel":189},"https://recharts.org/",[190],"nofollow","Recharts",". It provides composable charting components built with Vue 3 Composition API + JSX/TSX.",[194,195,197],"h2",{"id":196},"what-is-vccs","What is vccs?",[178,199,200,201,205,206,205,209,212,213,216],{},"vccs brings the declarative, component-based charting experience of Recharts to Vue 3. Instead of configuring charts with complex option objects, you compose them with intuitive components like ",[202,203,204],"code",{},"\u003CAreaChart>",", ",[202,207,208],{},"\u003CBar>",[202,210,211],{},"\u003CLine>",", and ",[202,214,215],{},"\u003CTooltip>",".",[194,218,220],{"id":219},"what-you-can-do","What you can do",[222,223,224,231,237,243,252],"ul",{},[225,226,227,230],"li",{},[181,228,229],{},"Build charts declaratively"," — Compose Area, Bar, Line, Scatter, Composed, Pie, Radar, and RadialBar charts with Vue components",[225,232,233,236],{},[181,234,235],{},"Customize everything"," — Override shapes, labels, tooltips, and legends via named slots",[225,238,239,242],{},[181,240,241],{},"Animate smoothly"," — Built-in transitions powered by Motion for Vue",[225,244,245,248,249],{},[181,246,247],{},"Synchronize charts"," — Link tooltip and hover state across multiple charts with ",[202,250,251],{},"syncId",[225,253,254,257],{},[181,255,256],{},"Respond to events"," — Handle click, hover, and brush interactions",[194,259,261],{"id":260},"when-to-use-vccs","When to use vccs",[178,263,264],{},"Use vccs when you need to:",[222,266,267,270,273,276],{},[225,268,269],{},"Add data visualization to a Vue 3 application",[225,271,272],{},"Migrate existing Recharts code from React to Vue",[225,274,275],{},"Build interactive, animated charts with a composable API",[225,277,278],{},"Customize chart appearance beyond what config-driven libraries offer",[194,280,282],{"id":281},"quick-example","Quick example",[284,285,291],"pre",{"className":286,"code":287,"filename":288,"language":289,"meta":290,"style":290},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'vccs'\n\nconst data = [\n  { name: 'Jan', uv: 4000 },\n  { name: 'Feb', uv: 3000 },\n  { name: 'Mar', uv: 2000 },\n  { name: 'Apr', uv: 2780 },\n  { name: 'May', uv: 1890 },\n  { name: 'Jun', uv: 2390 },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CAreaChart\n    :width=\"500\"\n    :height=\"300\"\n    :data=\"data\"\n  >\n    \u003CCartesianGrid stroke-dasharray=\"3 3\" />\n    \u003CXAxis data-key=\"name\" />\n    \u003CYAxis />\n    \u003CTooltip />\n    \u003CArea\n      type=\"monotone\"\n      data-key=\"uv\"\n      stroke=\"#8884d8\"\n      fill=\"#8884d8\"\n    />\n  \u003C/AreaChart>\n\u003C/template>\n","App.vue","vue","",[202,292,293,313,368,375,390,424,451,478,505,532,559,565,575,580,590,599,616,631,646,652,675,697,707,716,724,739,754,769,783,789,800],{"__ignoreMap":290},[294,295,298,302,306,310],"span",{"class":296,"line":297},"line",1,[294,299,301],{"class":300},"sMK4o","\u003C",[294,303,305],{"class":304},"swJcz","script",[294,307,309],{"class":308},"spNyl"," setup",[294,311,312],{"class":300},">\n",[294,314,316,320,323,327,330,333,335,338,340,343,345,348,350,353,356,359,362,365],{"class":296,"line":315},2,[294,317,319],{"class":318},"s7zQu","import",[294,321,322],{"class":300}," {",[294,324,326],{"class":325},"sTEyZ"," Area",[294,328,329],{"class":300},",",[294,331,332],{"class":325}," AreaChart",[294,334,329],{"class":300},[294,336,337],{"class":325}," CartesianGrid",[294,339,329],{"class":300},[294,341,342],{"class":325}," Tooltip",[294,344,329],{"class":300},[294,346,347],{"class":325}," XAxis",[294,349,329],{"class":300},[294,351,352],{"class":325}," YAxis",[294,354,355],{"class":300}," }",[294,357,358],{"class":318}," from",[294,360,361],{"class":300}," '",[294,363,183],{"class":364},"sfazB",[294,366,367],{"class":300},"'\n",[294,369,371],{"class":296,"line":370},3,[294,372,374],{"emptyLinePlaceholder":373},true,"\n",[294,376,378,381,384,387],{"class":296,"line":377},4,[294,379,380],{"class":308},"const",[294,382,383],{"class":325}," data ",[294,385,386],{"class":300},"=",[294,388,389],{"class":325}," [\n",[294,391,393,396,399,402,404,407,410,412,415,417,421],{"class":296,"line":392},5,[294,394,395],{"class":300},"  {",[294,397,398],{"class":304}," name",[294,400,401],{"class":300},":",[294,403,361],{"class":300},[294,405,406],{"class":364},"Jan",[294,408,409],{"class":300},"'",[294,411,329],{"class":300},[294,413,414],{"class":304}," uv",[294,416,401],{"class":300},[294,418,420],{"class":419},"sbssI"," 4000",[294,422,423],{"class":300}," },\n",[294,425,427,429,431,433,435,438,440,442,444,446,449],{"class":296,"line":426},6,[294,428,395],{"class":300},[294,430,398],{"class":304},[294,432,401],{"class":300},[294,434,361],{"class":300},[294,436,437],{"class":364},"Feb",[294,439,409],{"class":300},[294,441,329],{"class":300},[294,443,414],{"class":304},[294,445,401],{"class":300},[294,447,448],{"class":419}," 3000",[294,450,423],{"class":300},[294,452,454,456,458,460,462,465,467,469,471,473,476],{"class":296,"line":453},7,[294,455,395],{"class":300},[294,457,398],{"class":304},[294,459,401],{"class":300},[294,461,361],{"class":300},[294,463,464],{"class":364},"Mar",[294,466,409],{"class":300},[294,468,329],{"class":300},[294,470,414],{"class":304},[294,472,401],{"class":300},[294,474,475],{"class":419}," 2000",[294,477,423],{"class":300},[294,479,481,483,485,487,489,492,494,496,498,500,503],{"class":296,"line":480},8,[294,482,395],{"class":300},[294,484,398],{"class":304},[294,486,401],{"class":300},[294,488,361],{"class":300},[294,490,491],{"class":364},"Apr",[294,493,409],{"class":300},[294,495,329],{"class":300},[294,497,414],{"class":304},[294,499,401],{"class":300},[294,501,502],{"class":419}," 2780",[294,504,423],{"class":300},[294,506,508,510,512,514,516,519,521,523,525,527,530],{"class":296,"line":507},9,[294,509,395],{"class":300},[294,511,398],{"class":304},[294,513,401],{"class":300},[294,515,361],{"class":300},[294,517,518],{"class":364},"May",[294,520,409],{"class":300},[294,522,329],{"class":300},[294,524,414],{"class":304},[294,526,401],{"class":300},[294,528,529],{"class":419}," 1890",[294,531,423],{"class":300},[294,533,535,537,539,541,543,546,548,550,552,554,557],{"class":296,"line":534},10,[294,536,395],{"class":300},[294,538,398],{"class":304},[294,540,401],{"class":300},[294,542,361],{"class":300},[294,544,545],{"class":364},"Jun",[294,547,409],{"class":300},[294,549,329],{"class":300},[294,551,414],{"class":304},[294,553,401],{"class":300},[294,555,556],{"class":419}," 2390",[294,558,423],{"class":300},[294,560,562],{"class":296,"line":561},11,[294,563,564],{"class":325},"]\n",[294,566,568,571,573],{"class":296,"line":567},12,[294,569,570],{"class":300},"\u003C/",[294,572,305],{"class":304},[294,574,312],{"class":300},[294,576,578],{"class":296,"line":577},13,[294,579,374],{"emptyLinePlaceholder":373},[294,581,583,585,588],{"class":296,"line":582},14,[294,584,301],{"class":300},[294,586,587],{"class":304},"template",[294,589,312],{"class":300},[294,591,593,596],{"class":296,"line":592},15,[294,594,595],{"class":300},"  \u003C",[294,597,598],{"class":304},"AreaChart\n",[294,600,602,605,607,610,613],{"class":296,"line":601},16,[294,603,604],{"class":308},"    :width",[294,606,386],{"class":300},[294,608,609],{"class":300},"\"",[294,611,612],{"class":364},"500",[294,614,615],{"class":300},"\"\n",[294,617,619,622,624,626,629],{"class":296,"line":618},17,[294,620,621],{"class":308},"    :height",[294,623,386],{"class":300},[294,625,609],{"class":300},[294,627,628],{"class":364},"300",[294,630,615],{"class":300},[294,632,634,637,639,641,644],{"class":296,"line":633},18,[294,635,636],{"class":308},"    :data",[294,638,386],{"class":300},[294,640,609],{"class":300},[294,642,643],{"class":364},"data",[294,645,615],{"class":300},[294,647,649],{"class":296,"line":648},19,[294,650,651],{"class":300},"  >\n",[294,653,655,658,660,663,665,667,670,672],{"class":296,"line":654},20,[294,656,657],{"class":300},"    \u003C",[294,659,149],{"class":304},[294,661,662],{"class":308}," stroke-dasharray",[294,664,386],{"class":300},[294,666,609],{"class":300},[294,668,669],{"class":364},"3 3",[294,671,609],{"class":300},[294,673,674],{"class":300}," />\n",[294,676,678,680,683,686,688,690,693,695],{"class":296,"line":677},21,[294,679,657],{"class":300},[294,681,682],{"class":304},"XAxis",[294,684,685],{"class":308}," data-key",[294,687,386],{"class":300},[294,689,609],{"class":300},[294,691,692],{"class":364},"name",[294,694,609],{"class":300},[294,696,674],{"class":300},[294,698,700,702,705],{"class":296,"line":699},22,[294,701,657],{"class":300},[294,703,704],{"class":304},"YAxis",[294,706,674],{"class":300},[294,708,710,712,714],{"class":296,"line":709},23,[294,711,657],{"class":300},[294,713,139],{"class":304},[294,715,674],{"class":300},[294,717,719,721],{"class":296,"line":718},24,[294,720,657],{"class":300},[294,722,723],{"class":304},"Area\n",[294,725,727,730,732,734,737],{"class":296,"line":726},25,[294,728,729],{"class":308},"      type",[294,731,386],{"class":300},[294,733,609],{"class":300},[294,735,736],{"class":364},"monotone",[294,738,615],{"class":300},[294,740,742,745,747,749,752],{"class":296,"line":741},26,[294,743,744],{"class":308},"      data-key",[294,746,386],{"class":300},[294,748,609],{"class":300},[294,750,751],{"class":364},"uv",[294,753,615],{"class":300},[294,755,757,760,762,764,767],{"class":296,"line":756},27,[294,758,759],{"class":308},"      stroke",[294,761,386],{"class":300},[294,763,609],{"class":300},[294,765,766],{"class":364},"#8884d8",[294,768,615],{"class":300},[294,770,772,775,777,779,781],{"class":296,"line":771},28,[294,773,774],{"class":308},"      fill",[294,776,386],{"class":300},[294,778,609],{"class":300},[294,780,766],{"class":364},[294,782,615],{"class":300},[294,784,786],{"class":296,"line":785},29,[294,787,788],{"class":300},"    />\n",[294,790,792,795,798],{"class":296,"line":791},30,[294,793,794],{"class":300},"  \u003C/",[294,796,797],{"class":304},"AreaChart",[294,799,312],{"class":300},[294,801,803,805,807],{"class":296,"line":802},31,[294,804,570],{"class":300},[294,806,587],{"class":304},[294,808,312],{"class":300},[810,811,812],"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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":290,"searchDepth":315,"depth":315,"links":814},[815,816,817,818],{"id":196,"depth":315,"text":197},{"id":219,"depth":315,"text":220},{"id":260,"depth":315,"text":261},{"id":281,"depth":315,"text":282},"Learn what vccs is and when to use it","md",null,{},{"icon":14},{"title":11,"description":819},"64XU6zedt0Ckh1BXuU1icjkHj0yv0N4Oj8_chFl6L6U",[821,827],{"title":16,"path":17,"stem":18,"description":828,"icon":19,"children":-1},"How to install vccs and start building charts",1775472912429]