[{"data":1,"prerenderedAt":1094},["ShallowReactive",2],{"navigation_docs":3,"-guides-performance":284,"-guides-performance-surround":1089},[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":63,"body":286,"description":1082,"extension":1083,"links":1084,"meta":1085,"navigation":1086,"path":64,"seo":1087,"stem":65,"__hash__":1088},"docs\u002F2.guides\u002F08.performance.md",{"type":287,"value":288,"toc":1073},"minimark",[289,293,298,306,590,594,597,600,604,607,715,719,722,919,923,949,952,956,963,1028,1031,1035,1069],[290,291,292],"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.",[294,295,297],"h2",{"id":296},"use-computed-for-derived-data","Use computed for derived data",[290,299,300,301,305],{},"Avoid computing data inline in templates. Use ",[302,303,304],"code",{},"computed"," to cache derived values:",[307,308,313],"pre",{"className":309,"code":310,"language":311,"meta":312,"style":312},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { computed } from 'vue'\n\n\u002F\u002F Good: computed caches the result\nconst chartData = computed(() =>\n  rawData.value.map(d => ({ ...d, total: d.a + d.b }))\n)\n\n\u002F\u002F Bad: recalculates every render\n\u002F\u002F :data=\"rawData.map(d => ({ ...d, total: d.a + d.b }))\"\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLineChart :data=\"chartData\">\n    \u003CLine data-key=\"total\" \u002F>\n  \u003C\u002FLineChart>\n\u003C\u002Ftemplate>\n","vue","",[302,314,315,335,364,371,378,402,472,478,483,489,495,505,510,520,547,571,581],{"__ignoreMap":312},[316,317,320,324,328,332],"span",{"class":318,"line":319},"line",1,[316,321,323],{"class":322},"sMK4o","\u003C",[316,325,327],{"class":326},"swJcz","script",[316,329,331],{"class":330},"spNyl"," setup",[316,333,334],{"class":322},">\n",[316,336,338,342,345,349,352,355,358,361],{"class":318,"line":337},2,[316,339,341],{"class":340},"s7zQu","import",[316,343,344],{"class":322}," {",[316,346,348],{"class":347},"sTEyZ"," computed",[316,350,351],{"class":322}," }",[316,353,354],{"class":340}," from",[316,356,357],{"class":322}," '",[316,359,311],{"class":360},"sfazB",[316,362,363],{"class":322},"'\n",[316,365,367],{"class":318,"line":366},3,[316,368,370],{"emptyLinePlaceholder":369},true,"\n",[316,372,374],{"class":318,"line":373},4,[316,375,377],{"class":376},"sHwdD","\u002F\u002F Good: computed caches the result\n",[316,379,381,384,387,390,393,396,399],{"class":318,"line":380},5,[316,382,383],{"class":330},"const",[316,385,386],{"class":347}," chartData ",[316,388,389],{"class":322},"=",[316,391,348],{"class":392},"s2Zo4",[316,394,395],{"class":347},"(",[316,397,398],{"class":322},"()",[316,400,401],{"class":330}," =>\n",[316,403,405,408,411,414,416,419,421,425,428,431,434,437,439,442,445,448,451,453,456,459,461,463,466,469],{"class":318,"line":404},6,[316,406,407],{"class":347},"  rawData",[316,409,410],{"class":322},".",[316,412,413],{"class":347},"value",[316,415,410],{"class":322},[316,417,418],{"class":392},"map",[316,420,395],{"class":347},[316,422,424],{"class":423},"sHdIc","d",[316,426,427],{"class":330}," =>",[316,429,430],{"class":347}," (",[316,432,433],{"class":322},"{",[316,435,436],{"class":322}," ...",[316,438,424],{"class":347},[316,440,441],{"class":322},",",[316,443,444],{"class":326}," total",[316,446,447],{"class":322},":",[316,449,450],{"class":347}," d",[316,452,410],{"class":322},[316,454,455],{"class":347},"a ",[316,457,458],{"class":322},"+",[316,460,450],{"class":347},[316,462,410],{"class":322},[316,464,465],{"class":347},"b ",[316,467,468],{"class":322},"}",[316,470,471],{"class":347},"))\n",[316,473,475],{"class":318,"line":474},7,[316,476,477],{"class":347},")\n",[316,479,481],{"class":318,"line":480},8,[316,482,370],{"emptyLinePlaceholder":369},[316,484,486],{"class":318,"line":485},9,[316,487,488],{"class":376},"\u002F\u002F Bad: recalculates every render\n",[316,490,492],{"class":318,"line":491},10,[316,493,494],{"class":376},"\u002F\u002F :data=\"rawData.map(d => ({ ...d, total: d.a + d.b }))\"\n",[316,496,498,501,503],{"class":318,"line":497},11,[316,499,500],{"class":322},"\u003C\u002F",[316,502,327],{"class":326},[316,504,334],{"class":322},[316,506,508],{"class":318,"line":507},12,[316,509,370],{"emptyLinePlaceholder":369},[316,511,513,515,518],{"class":318,"line":512},13,[316,514,323],{"class":322},[316,516,517],{"class":326},"template",[316,519,334],{"class":322},[316,521,523,526,529,532,535,537,540,543,545],{"class":318,"line":522},14,[316,524,525],{"class":322},"  \u003C",[316,527,528],{"class":326},"LineChart",[316,530,531],{"class":322}," :",[316,533,534],{"class":330},"data",[316,536,389],{"class":322},[316,538,539],{"class":322},"\"",[316,541,542],{"class":347},"chartData",[316,544,539],{"class":322},[316,546,334],{"class":322},[316,548,550,553,556,559,561,563,566,568],{"class":318,"line":549},15,[316,551,552],{"class":322},"    \u003C",[316,554,555],{"class":326},"Line",[316,557,558],{"class":330}," data-key",[316,560,389],{"class":322},[316,562,539],{"class":322},[316,564,565],{"class":360},"total",[316,567,539],{"class":322},[316,569,570],{"class":322}," \u002F>\n",[316,572,574,577,579],{"class":318,"line":573},16,[316,575,576],{"class":322},"  \u003C\u002F",[316,578,528],{"class":326},[316,580,334],{"class":322},[316,582,584,586,588],{"class":318,"line":583},17,[316,585,500],{"class":322},[316,587,517],{"class":326},[316,589,334],{"class":322},[294,591,593],{"id":592},"what-to-expect","What to expect",[290,595,596],{},"Up to a few hundred bars or a few thousand points, transitions stay smooth. Beyond that, the browser still draws every element on every frame, so frames start to drop on slower devices.",[290,598,599],{},"A chart registers each series separately. Charts with well over 100 series (for example 100 funnels) can reach Vue's limit on repeated updates in one tick; combine series into fewer components or split the chart.",[294,601,603],{"id":602},"disable-animations-for-large-datasets","Disable animations for large datasets",[290,605,606],{},"Each animated element is updated on every frame. With thousands of data points, disable animation:",[307,608,610],{"className":309,"code":609,"language":311,"meta":312,"style":312},"\u003CLine data-key=\"value\" :is-animation-active=\"false\" \u002F>\n\n\u003CBar data-key=\"value\" :is-animation-active=\"false\" \u002F>\n\n\u003CArea data-key=\"value\" :is-animation-active=\"false\" \u002F>\n",[302,611,612,645,649,680,684],{"__ignoreMap":312},[316,613,614,616,618,620,622,624,626,628,630,633,635,637,641,643],{"class":318,"line":319},[316,615,323],{"class":322},[316,617,555],{"class":326},[316,619,558],{"class":330},[316,621,389],{"class":322},[316,623,539],{"class":322},[316,625,413],{"class":360},[316,627,539],{"class":322},[316,629,531],{"class":322},[316,631,632],{"class":330},"is-animation-active",[316,634,389],{"class":322},[316,636,539],{"class":322},[316,638,640],{"class":639},"sfNiH","false",[316,642,539],{"class":322},[316,644,570],{"class":322},[316,646,647],{"class":318,"line":337},[316,648,370],{"emptyLinePlaceholder":369},[316,650,651,653,656,658,660,662,664,666,668,670,672,674,676,678],{"class":318,"line":366},[316,652,323],{"class":322},[316,654,655],{"class":326},"Bar",[316,657,558],{"class":330},[316,659,389],{"class":322},[316,661,539],{"class":322},[316,663,413],{"class":360},[316,665,539],{"class":322},[316,667,531],{"class":322},[316,669,632],{"class":330},[316,671,389],{"class":322},[316,673,539],{"class":322},[316,675,640],{"class":639},[316,677,539],{"class":322},[316,679,570],{"class":322},[316,681,682],{"class":318,"line":373},[316,683,370],{"emptyLinePlaceholder":369},[316,685,686,688,691,693,695,697,699,701,703,705,707,709,711,713],{"class":318,"line":380},[316,687,323],{"class":322},[316,689,690],{"class":326},"Area",[316,692,558],{"class":330},[316,694,389],{"class":322},[316,696,539],{"class":322},[316,698,413],{"class":360},[316,700,539],{"class":322},[316,702,531],{"class":322},[316,704,632],{"class":330},[316,706,389],{"class":322},[316,708,539],{"class":322},[316,710,640],{"class":639},[316,712,539],{"class":322},[316,714,570],{"class":322},[294,716,718],{"id":717},"sample-large-datasets","Sample large datasets",[290,720,721],{},"Rather than rendering 10,000+ points, downsample your data:",[307,723,725],{"className":309,"code":724,"language":311,"meta":312,"style":312},"\u003Cscript setup>\nimport { computed } from 'vue'\n\nconst sampledData = computed(() => {\n  const data = rawData.value\n  if (data.length \u003C= 500)\n    return data\n  const step = Math.ceil(data.length \u002F 500)\n  return data.filter((_, i) => i % step === 0)\n})\n\u003C\u002Fscript>\n",[302,726,727,737,755,759,779,798,821,829,861,905,911],{"__ignoreMap":312},[316,728,729,731,733,735],{"class":318,"line":319},[316,730,323],{"class":322},[316,732,327],{"class":326},[316,734,331],{"class":330},[316,736,334],{"class":322},[316,738,739,741,743,745,747,749,751,753],{"class":318,"line":337},[316,740,341],{"class":340},[316,742,344],{"class":322},[316,744,348],{"class":347},[316,746,351],{"class":322},[316,748,354],{"class":340},[316,750,357],{"class":322},[316,752,311],{"class":360},[316,754,363],{"class":322},[316,756,757],{"class":318,"line":366},[316,758,370],{"emptyLinePlaceholder":369},[316,760,761,763,766,768,770,772,774,776],{"class":318,"line":373},[316,762,383],{"class":330},[316,764,765],{"class":347}," sampledData ",[316,767,389],{"class":322},[316,769,348],{"class":392},[316,771,395],{"class":347},[316,773,398],{"class":322},[316,775,427],{"class":330},[316,777,778],{"class":322}," {\n",[316,780,781,784,787,790,793,795],{"class":318,"line":380},[316,782,783],{"class":330},"  const",[316,785,786],{"class":347}," data",[316,788,789],{"class":322}," =",[316,791,792],{"class":347}," rawData",[316,794,410],{"class":322},[316,796,797],{"class":347},"value\n",[316,799,800,803,805,807,809,812,815,819],{"class":318,"line":404},[316,801,802],{"class":340},"  if",[316,804,430],{"class":326},[316,806,534],{"class":347},[316,808,410],{"class":322},[316,810,811],{"class":347},"length",[316,813,814],{"class":322}," \u003C=",[316,816,818],{"class":817},"sbssI"," 500",[316,820,477],{"class":326},[316,822,823,826],{"class":318,"line":474},[316,824,825],{"class":340},"    return",[316,827,828],{"class":347}," data\n",[316,830,831,833,836,838,841,843,846,848,850,852,854,857,859],{"class":318,"line":480},[316,832,783],{"class":330},[316,834,835],{"class":347}," step",[316,837,789],{"class":322},[316,839,840],{"class":347}," Math",[316,842,410],{"class":322},[316,844,845],{"class":392},"ceil",[316,847,395],{"class":326},[316,849,534],{"class":347},[316,851,410],{"class":322},[316,853,811],{"class":347},[316,855,856],{"class":322}," \u002F",[316,858,818],{"class":817},[316,860,477],{"class":326},[316,862,863,866,868,870,873,875,877,880,882,885,888,890,892,895,897,900,903],{"class":318,"line":485},[316,864,865],{"class":340},"  return",[316,867,786],{"class":347},[316,869,410],{"class":322},[316,871,872],{"class":392},"filter",[316,874,395],{"class":326},[316,876,395],{"class":322},[316,878,879],{"class":423},"_",[316,881,441],{"class":322},[316,883,884],{"class":423}," i",[316,886,887],{"class":322},")",[316,889,427],{"class":330},[316,891,884],{"class":347},[316,893,894],{"class":322}," %",[316,896,835],{"class":347},[316,898,899],{"class":322}," ===",[316,901,902],{"class":817}," 0",[316,904,477],{"class":326},[316,906,907,909],{"class":318,"line":491},[316,908,468],{"class":322},[316,910,477],{"class":347},[316,912,913,915,917],{"class":318,"line":497},[316,914,500],{"class":322},[316,916,327],{"class":326},[316,918,334],{"class":322},[294,920,922],{"id":921},"update-data-the-way-you-like","Update data the way you like",[290,924,925,926,929,930,933,934,937,938,941,942,945,946,948],{},"Charts track ",[302,927,928],{},"reactive()"," and ",[302,931,932],{},"ref()"," data deeply. Array replacement, ",[302,935,936],{},"push",", ",[302,939,940],{},"splice"," and row-field edits update the chart. This includes nested path or function accessor values, array-valued rows and edits inside a hierarchy. For very large or streaming datasets, keep plain rows in a ",[302,943,944],{},"shallowRef"," and assign a new array per update. A ",[302,947,944],{}," does not make those rows reactive, so in-place edits to them need an array replacement to notify the chart.",[290,950,951],{},"Hovering is cheap: moving the pointer recomputes only tooltip state, never bar, line or axis geometry.",[294,953,955],{"id":954},"unwrap-reactive-proxies-for-d3","Unwrap reactive proxies for D3",[290,957,958,959,962],{},"D3 scale functions don't work with Vue's reactive Proxy objects. Use ",[302,960,961],{},"toRaw()"," when passing data to D3:",[307,964,966],{"className":309,"code":965,"language":311,"meta":312,"style":312},"\u003Cscript setup>\nimport { toRaw } from 'vue'\n\n\u002F\u002F When working with custom scales or D3 utilities\nconst rawEntry = toRaw(entry)\n\u003C\u002Fscript>\n",[302,967,968,978,997,1001,1006,1020],{"__ignoreMap":312},[316,969,970,972,974,976],{"class":318,"line":319},[316,971,323],{"class":322},[316,973,327],{"class":326},[316,975,331],{"class":330},[316,977,334],{"class":322},[316,979,980,982,984,987,989,991,993,995],{"class":318,"line":337},[316,981,341],{"class":340},[316,983,344],{"class":322},[316,985,986],{"class":347}," toRaw",[316,988,351],{"class":322},[316,990,354],{"class":340},[316,992,357],{"class":322},[316,994,311],{"class":360},[316,996,363],{"class":322},[316,998,999],{"class":318,"line":366},[316,1000,370],{"emptyLinePlaceholder":369},[316,1002,1003],{"class":318,"line":373},[316,1004,1005],{"class":376},"\u002F\u002F When working with custom scales or D3 utilities\n",[316,1007,1008,1010,1013,1015,1017],{"class":318,"line":380},[316,1009,383],{"class":330},[316,1011,1012],{"class":347}," rawEntry ",[316,1014,389],{"class":322},[316,1016,986],{"class":392},[316,1018,1019],{"class":347},"(entry)\n",[316,1021,1022,1024,1026],{"class":318,"line":404},[316,1023,500],{"class":322},[316,1025,327],{"class":326},[316,1027,334],{"class":322},[290,1029,1030],{},"This is handled internally by vccs, but keep it in mind if you're using D3 utilities directly alongside your charts.",[294,1032,1034],{"id":1033},"avoid-unnecessary-re-renders","Avoid unnecessary re-renders",[1036,1037,1038,1053,1063],"ul",{},[1039,1040,1041,1045,1046,1049,1050,1052],"li",{},[1042,1043,1044],"strong",{},"Stable data references",": Don't create new arrays\u002Fobjects on every render. Use ",[302,1047,1048],{},"ref"," or ",[302,1051,304],{}," to maintain stable references.",[1039,1054,1055,1058,1059,1062],{},[1042,1056,1057],{},"Key prop",": When dynamically switching between charts, use ",[302,1060,1061],{},":key"," to control component identity and avoid stale state.",[1039,1064,1065,1068],{},[1042,1066,1067],{},"Debounce updates",": If data changes rapidly (e.g., real-time feeds), debounce updates to avoid overwhelming the renderer.",[1070,1071,1072],"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":312,"searchDepth":337,"depth":337,"links":1074},[1075,1076,1077,1078,1079,1080,1081],{"id":296,"depth":337,"text":297},{"id":592,"depth":337,"text":593},{"id":602,"depth":337,"text":603},{"id":717,"depth":337,"text":718},{"id":921,"depth":337,"text":922},{"id":954,"depth":337,"text":955},{"id":1033,"depth":337,"text":1034},"Optimize chart rendering for large datasets and complex visualizations","md",null,{},{"icon":66},{"title":63,"description":1082},"QnAVKb7fsiY77dMw3qs3IUeC01w6wuK-iel8PqE-OVc",[1090,1092],{"title":58,"path":59,"stem":60,"description":1091,"icon":61,"children":-1},"Data values, pixels and polar coordinates in charts",{"title":68,"path":69,"stem":70,"description":1093,"icon":71,"children":-1},"Add rounded corners to bar charts using the radius prop",1793527165704]