[{"data":1,"prerenderedAt":932},["ShallowReactive",2],{"navigation_docs":3,"-guides-performance":177,"-guides-performance-surround":927},[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":63,"body":179,"description":920,"extension":921,"links":922,"meta":923,"navigation":924,"path":64,"seo":925,"stem":65,"__hash__":926},"docs/2.guides/08.performance.md",{"type":180,"value":181,"toc":913},"minimark",[182,186,191,199,480,484,487,588,592,595,792,796,803,868,871,875,909],[183,184,185],"p",{},"vccs charts are reactive — they re-render when data or props change. For most use cases, performance is excellent out of the box. For large datasets or frequent updates, these tips help keep things smooth.",[187,188,190],"h2",{"id":189},"use-computed-for-derived-data","Use computed for derived data",[183,192,193,194,198],{},"Avoid computing data inline in templates. Use ",[195,196,197],"code",{},"computed"," to cache derived values:",[200,201,206],"pre",{"className":202,"code":203,"language":204,"meta":205,"style":205},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { computed } from 'vue'\n\n// Good: computed caches the result\nconst chartData = computed(() =>\n  rawData.value.map(d => ({ ...d, total: d.a + d.b }))\n)\n\n// Bad: recalculates every render\n// :data=\"rawData.map(d => ({ ...d, total: d.a + d.b }))\"\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CLineChart :data=\"chartData\">\n    \u003CLine data-key=\"total\" />\n  \u003C/LineChart>\n\u003C/template>\n","vue","",[195,207,208,228,257,264,271,295,365,371,376,382,388,398,403,413,437,461,471],{"__ignoreMap":205},[209,210,213,217,221,225],"span",{"class":211,"line":212},"line",1,[209,214,216],{"class":215},"sMK4o","\u003C",[209,218,220],{"class":219},"swJcz","script",[209,222,224],{"class":223},"spNyl"," setup",[209,226,227],{"class":215},">\n",[209,229,231,235,238,242,245,248,251,254],{"class":211,"line":230},2,[209,232,234],{"class":233},"s7zQu","import",[209,236,237],{"class":215}," {",[209,239,241],{"class":240},"sTEyZ"," computed",[209,243,244],{"class":215}," }",[209,246,247],{"class":233}," from",[209,249,250],{"class":215}," '",[209,252,204],{"class":253},"sfazB",[209,255,256],{"class":215},"'\n",[209,258,260],{"class":211,"line":259},3,[209,261,263],{"emptyLinePlaceholder":262},true,"\n",[209,265,267],{"class":211,"line":266},4,[209,268,270],{"class":269},"sHwdD","// Good: computed caches the result\n",[209,272,274,277,280,283,286,289,292],{"class":211,"line":273},5,[209,275,276],{"class":223},"const",[209,278,279],{"class":240}," chartData ",[209,281,282],{"class":215},"=",[209,284,241],{"class":285},"s2Zo4",[209,287,288],{"class":240},"(",[209,290,291],{"class":215},"()",[209,293,294],{"class":223}," =>\n",[209,296,298,301,304,307,309,312,314,318,321,324,327,330,332,335,338,341,344,346,349,352,354,356,359,362],{"class":211,"line":297},6,[209,299,300],{"class":240},"  rawData",[209,302,303],{"class":215},".",[209,305,306],{"class":240},"value",[209,308,303],{"class":215},[209,310,311],{"class":285},"map",[209,313,288],{"class":240},[209,315,317],{"class":316},"sHdIc","d",[209,319,320],{"class":223}," =>",[209,322,323],{"class":240}," (",[209,325,326],{"class":215},"{",[209,328,329],{"class":215}," ...",[209,331,317],{"class":240},[209,333,334],{"class":215},",",[209,336,337],{"class":219}," total",[209,339,340],{"class":215},":",[209,342,343],{"class":240}," d",[209,345,303],{"class":215},[209,347,348],{"class":240},"a ",[209,350,351],{"class":215},"+",[209,353,343],{"class":240},[209,355,303],{"class":215},[209,357,358],{"class":240},"b ",[209,360,361],{"class":215},"}",[209,363,364],{"class":240},"))\n",[209,366,368],{"class":211,"line":367},7,[209,369,370],{"class":240},")\n",[209,372,374],{"class":211,"line":373},8,[209,375,263],{"emptyLinePlaceholder":262},[209,377,379],{"class":211,"line":378},9,[209,380,381],{"class":269},"// Bad: recalculates every render\n",[209,383,385],{"class":211,"line":384},10,[209,386,387],{"class":269},"// :data=\"rawData.map(d => ({ ...d, total: d.a + d.b }))\"\n",[209,389,391,394,396],{"class":211,"line":390},11,[209,392,393],{"class":215},"\u003C/",[209,395,220],{"class":219},[209,397,227],{"class":215},[209,399,401],{"class":211,"line":400},12,[209,402,263],{"emptyLinePlaceholder":262},[209,404,406,408,411],{"class":211,"line":405},13,[209,407,216],{"class":215},[209,409,410],{"class":219},"template",[209,412,227],{"class":215},[209,414,416,419,422,425,427,430,433,435],{"class":211,"line":415},14,[209,417,418],{"class":215},"  \u003C",[209,420,421],{"class":219},"LineChart",[209,423,424],{"class":223}," :data",[209,426,282],{"class":215},[209,428,429],{"class":215},"\"",[209,431,432],{"class":253},"chartData",[209,434,429],{"class":215},[209,436,227],{"class":215},[209,438,440,443,446,449,451,453,456,458],{"class":211,"line":439},15,[209,441,442],{"class":215},"    \u003C",[209,444,445],{"class":219},"Line",[209,447,448],{"class":223}," data-key",[209,450,282],{"class":215},[209,452,429],{"class":215},[209,454,455],{"class":253},"total",[209,457,429],{"class":215},[209,459,460],{"class":215}," />\n",[209,462,464,467,469],{"class":211,"line":463},16,[209,465,466],{"class":215},"  \u003C/",[209,468,421],{"class":219},[209,470,227],{"class":215},[209,472,474,476,478],{"class":211,"line":473},17,[209,475,393],{"class":215},[209,477,410],{"class":219},[209,479,227],{"class":215},[187,481,483],{"id":482},"disable-animations-for-large-datasets","Disable animations for large datasets",[183,485,486],{},"Animations run per-element. With thousands of data points, disable them:",[200,488,490],{"className":202,"code":489,"language":204,"meta":205,"style":205},"\u003CLine data-key=\"value\" :is-animation-active=\"false\" />\n\u003CBar data-key=\"value\" :is-animation-active=\"false\" />\n\u003CArea data-key=\"value\" :is-animation-active=\"false\" />\n",[195,491,492,526,557],{"__ignoreMap":205},[209,493,494,496,498,500,502,504,506,508,511,514,516,518,522,524],{"class":211,"line":212},[209,495,216],{"class":215},[209,497,445],{"class":219},[209,499,448],{"class":223},[209,501,282],{"class":215},[209,503,429],{"class":215},[209,505,306],{"class":253},[209,507,429],{"class":215},[209,509,510],{"class":215}," :",[209,512,513],{"class":223},"is-animation-active",[209,515,282],{"class":215},[209,517,429],{"class":215},[209,519,521],{"class":520},"sfNiH","false",[209,523,429],{"class":215},[209,525,460],{"class":215},[209,527,528,530,533,535,537,539,541,543,545,547,549,551,553,555],{"class":211,"line":230},[209,529,216],{"class":215},[209,531,532],{"class":219},"Bar",[209,534,448],{"class":223},[209,536,282],{"class":215},[209,538,429],{"class":215},[209,540,306],{"class":253},[209,542,429],{"class":215},[209,544,510],{"class":215},[209,546,513],{"class":223},[209,548,282],{"class":215},[209,550,429],{"class":215},[209,552,521],{"class":520},[209,554,429],{"class":215},[209,556,460],{"class":215},[209,558,559,561,564,566,568,570,572,574,576,578,580,582,584,586],{"class":211,"line":259},[209,560,216],{"class":215},[209,562,563],{"class":219},"Area",[209,565,448],{"class":223},[209,567,282],{"class":215},[209,569,429],{"class":215},[209,571,306],{"class":253},[209,573,429],{"class":215},[209,575,510],{"class":215},[209,577,513],{"class":223},[209,579,282],{"class":215},[209,581,429],{"class":215},[209,583,521],{"class":520},[209,585,429],{"class":215},[209,587,460],{"class":215},[187,589,591],{"id":590},"sample-large-datasets","Sample large datasets",[183,593,594],{},"Rather than rendering 10,000+ points, downsample your data:",[200,596,598],{"className":202,"code":597,"language":204,"meta":205,"style":205},"\u003Cscript setup>\nimport { computed } from 'vue'\n\nconst sampledData = computed(() => {\n  const data = rawData.value\n  if (data.length \u003C= 500) return data\n  const step = Math.ceil(data.length / 500)\n  return data.filter((_, i) => i % step === 0)\n})\n\u003C/script>\n",[195,599,600,610,628,632,652,671,702,734,778,784],{"__ignoreMap":205},[209,601,602,604,606,608],{"class":211,"line":212},[209,603,216],{"class":215},[209,605,220],{"class":219},[209,607,224],{"class":223},[209,609,227],{"class":215},[209,611,612,614,616,618,620,622,624,626],{"class":211,"line":230},[209,613,234],{"class":233},[209,615,237],{"class":215},[209,617,241],{"class":240},[209,619,244],{"class":215},[209,621,247],{"class":233},[209,623,250],{"class":215},[209,625,204],{"class":253},[209,627,256],{"class":215},[209,629,630],{"class":211,"line":259},[209,631,263],{"emptyLinePlaceholder":262},[209,633,634,636,639,641,643,645,647,649],{"class":211,"line":266},[209,635,276],{"class":223},[209,637,638],{"class":240}," sampledData ",[209,640,282],{"class":215},[209,642,241],{"class":285},[209,644,288],{"class":240},[209,646,291],{"class":215},[209,648,320],{"class":223},[209,650,651],{"class":215}," {\n",[209,653,654,657,660,663,666,668],{"class":211,"line":273},[209,655,656],{"class":223},"  const",[209,658,659],{"class":240}," data",[209,661,662],{"class":215}," =",[209,664,665],{"class":240}," rawData",[209,667,303],{"class":215},[209,669,670],{"class":240},"value\n",[209,672,673,676,678,681,683,686,689,693,696,699],{"class":211,"line":297},[209,674,675],{"class":233},"  if",[209,677,323],{"class":219},[209,679,680],{"class":240},"data",[209,682,303],{"class":215},[209,684,685],{"class":240},"length",[209,687,688],{"class":215}," \u003C=",[209,690,692],{"class":691},"sbssI"," 500",[209,694,695],{"class":219},") ",[209,697,698],{"class":233},"return",[209,700,701],{"class":240}," data\n",[209,703,704,706,709,711,714,716,719,721,723,725,727,730,732],{"class":211,"line":367},[209,705,656],{"class":223},[209,707,708],{"class":240}," step",[209,710,662],{"class":215},[209,712,713],{"class":240}," Math",[209,715,303],{"class":215},[209,717,718],{"class":285},"ceil",[209,720,288],{"class":219},[209,722,680],{"class":240},[209,724,303],{"class":215},[209,726,685],{"class":240},[209,728,729],{"class":215}," /",[209,731,692],{"class":691},[209,733,370],{"class":219},[209,735,736,739,741,743,746,748,750,753,755,758,761,763,765,768,770,773,776],{"class":211,"line":373},[209,737,738],{"class":233},"  return",[209,740,659],{"class":240},[209,742,303],{"class":215},[209,744,745],{"class":285},"filter",[209,747,288],{"class":219},[209,749,288],{"class":215},[209,751,752],{"class":316},"_",[209,754,334],{"class":215},[209,756,757],{"class":316}," i",[209,759,760],{"class":215},")",[209,762,320],{"class":223},[209,764,757],{"class":240},[209,766,767],{"class":215}," %",[209,769,708],{"class":240},[209,771,772],{"class":215}," ===",[209,774,775],{"class":691}," 0",[209,777,370],{"class":219},[209,779,780,782],{"class":211,"line":378},[209,781,361],{"class":215},[209,783,370],{"class":240},[209,785,786,788,790],{"class":211,"line":384},[209,787,393],{"class":215},[209,789,220],{"class":219},[209,791,227],{"class":215},[187,793,795],{"id":794},"unwrap-reactive-proxies-for-d3","Unwrap reactive proxies for D3",[183,797,798,799,802],{},"D3 scale functions don't work with Vue's reactive Proxy objects. Use ",[195,800,801],{},"toRaw()"," when passing data to D3:",[200,804,806],{"className":202,"code":805,"language":204,"meta":205,"style":205},"\u003Cscript setup>\nimport { toRaw } from 'vue'\n\n// When working with custom scales or D3 utilities\nconst rawEntry = toRaw(entry)\n\u003C/script>\n",[195,807,808,818,837,841,846,860],{"__ignoreMap":205},[209,809,810,812,814,816],{"class":211,"line":212},[209,811,216],{"class":215},[209,813,220],{"class":219},[209,815,224],{"class":223},[209,817,227],{"class":215},[209,819,820,822,824,827,829,831,833,835],{"class":211,"line":230},[209,821,234],{"class":233},[209,823,237],{"class":215},[209,825,826],{"class":240}," toRaw",[209,828,244],{"class":215},[209,830,247],{"class":233},[209,832,250],{"class":215},[209,834,204],{"class":253},[209,836,256],{"class":215},[209,838,839],{"class":211,"line":259},[209,840,263],{"emptyLinePlaceholder":262},[209,842,843],{"class":211,"line":266},[209,844,845],{"class":269},"// When working with custom scales or D3 utilities\n",[209,847,848,850,853,855,857],{"class":211,"line":273},[209,849,276],{"class":223},[209,851,852],{"class":240}," rawEntry ",[209,854,282],{"class":215},[209,856,826],{"class":285},[209,858,859],{"class":240},"(entry)\n",[209,861,862,864,866],{"class":211,"line":297},[209,863,393],{"class":215},[209,865,220],{"class":219},[209,867,227],{"class":215},[183,869,870],{},"This is handled internally by vccs, but keep it in mind if you're using D3 utilities directly alongside your charts.",[187,872,874],{"id":873},"avoid-unnecessary-re-renders","Avoid unnecessary re-renders",[876,877,878,893,903],"ul",{},[879,880,881,885,886,889,890,892],"li",{},[882,883,884],"strong",{},"Stable data references",": Don't create new arrays/objects on every render. Use ",[195,887,888],{},"ref"," or ",[195,891,197],{}," to maintain stable references.",[879,894,895,898,899,902],{},[882,896,897],{},"Key prop",": When dynamically switching between charts, use ",[195,900,901],{},":key"," to control component identity and avoid stale state.",[879,904,905,908],{},[882,906,907],{},"Debounce updates",": If data changes rapidly (e.g., real-time feeds), debounce updates to avoid overwhelming the renderer.",[910,911,912],"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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":205,"searchDepth":230,"depth":230,"links":914},[915,916,917,918,919],{"id":189,"depth":230,"text":190},{"id":482,"depth":230,"text":483},{"id":590,"depth":230,"text":591},{"id":794,"depth":230,"text":795},{"id":873,"depth":230,"text":874},"Optimize chart rendering for large datasets and complex visualizations","md",null,{},{"icon":66},{"title":63,"description":920},"xe1nI7jQatl7pG1yI7DPBz7ntQqgWmq5XToItajxwwY",[928,930],{"title":58,"path":59,"stem":60,"description":929,"icon":61,"children":-1},"Understand domain, pixel, and polar coordinate systems in charts",{"title":68,"path":69,"stem":70,"description":931,"icon":71,"children":-1},"Add rounded corners to bar charts using the radius prop",1775929453605]