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