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