[{"data":1,"prerenderedAt":1089},["ShallowReactive",2],{"navigation_docs":3,"-guides-performance":279,"-guides-performance-surround":1084},[4,26,112,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"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",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[32,37,42,47,52,57,62,67,72,77,82,87,92,97,102,107],{"title":33,"path":34,"stem":35,"icon":36},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":38,"path":39,"stem":40,"icon":41},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":48,"path":49,"stem":50,"icon":51},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":53,"path":54,"stem":55,"icon":56},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":58,"path":59,"stem":60,"icon":61},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":63,"path":64,"stem":65,"icon":66},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":68,"path":69,"stem":70,"icon":71},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":73,"path":74,"stem":75,"icon":76},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":78,"path":79,"stem":80,"icon":81},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":83,"path":84,"stem":85,"icon":86},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":88,"path":89,"stem":90,"icon":91},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":93,"path":94,"stem":95,"icon":96},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":98,"path":99,"stem":100,"icon":101},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":103,"path":104,"stem":105,"icon":106},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":108,"path":109,"stem":110,"icon":111},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":113,"icon":114,"path":115,"stem":116,"children":117,"page":25},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[118,123,128,133,138,143,148,153,158,163,167,172,177,182,187,192,197,201,206],{"title":119,"path":120,"stem":121,"icon":122},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":124,"path":125,"stem":126,"icon":127},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":129,"path":130,"stem":131,"icon":132},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":134,"path":135,"stem":136,"icon":137},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":139,"path":140,"stem":141,"icon":142},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":144,"path":145,"stem":146,"icon":147},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":149,"path":150,"stem":151,"icon":152},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":154,"path":155,"stem":156,"icon":157},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":159,"path":160,"stem":161,"icon":162},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":164,"path":165,"stem":166,"icon":51},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":168,"path":169,"stem":170,"icon":171},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":173,"path":174,"stem":175,"icon":176},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":178,"path":179,"stem":180,"icon":181},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":183,"path":184,"stem":185,"icon":186},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":188,"path":189,"stem":190,"icon":191},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":193,"path":194,"stem":195,"icon":196},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":198,"path":199,"stem":200,"icon":137},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":202,"path":203,"stem":204,"icon":205},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":207,"path":208,"stem":209,"icon":210},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":25},"Components","i-lucide-code","\u002Fcomponents","4.components",[217,222,227,231,236,240,245,249,254,259,264,269,274],{"title":218,"path":219,"stem":220,"icon":221},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":223,"path":224,"stem":225,"icon":226},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":228,"path":229,"stem":230,"icon":196},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":232,"path":233,"stem":234,"icon":235},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":237,"path":238,"stem":239,"icon":147},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":241,"path":242,"stem":243,"icon":244},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":246,"path":247,"stem":248,"icon":56},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":250,"path":251,"stem":252,"icon":253},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":255,"path":256,"stem":257,"icon":258},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":260,"path":261,"stem":262,"icon":263},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":265,"path":266,"stem":267,"icon":268},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":270,"path":271,"stem":272,"icon":273},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":275,"path":276,"stem":277,"icon":278},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":280,"title":58,"body":281,"description":1077,"extension":1078,"links":1079,"meta":1080,"navigation":1081,"path":59,"seo":1082,"stem":60,"__hash__":1083},"docs\u002F2.guides\u002F08.performance.md",{"type":282,"value":283,"toc":1068},"minimark",[284,288,293,301,585,589,592,595,599,602,710,714,717,914,918,944,947,951,958,1023,1026,1030,1064],[285,286,287],"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.",[289,290,292],"h2",{"id":291},"use-computed-for-derived-data","Use computed for derived data",[285,294,295,296,300],{},"Avoid computing data inline in templates. Use ",[297,298,299],"code",{},"computed"," to cache derived values:",[302,303,308],"pre",{"className":304,"code":305,"language":306,"meta":307,"style":307},"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","",[297,309,310,330,359,366,373,397,467,473,478,484,490,500,505,515,542,566,576],{"__ignoreMap":307},[311,312,315,319,323,327],"span",{"class":313,"line":314},"line",1,[311,316,318],{"class":317},"sMK4o","\u003C",[311,320,322],{"class":321},"swJcz","script",[311,324,326],{"class":325},"spNyl"," setup",[311,328,329],{"class":317},">\n",[311,331,333,337,340,344,347,350,353,356],{"class":313,"line":332},2,[311,334,336],{"class":335},"s7zQu","import",[311,338,339],{"class":317}," {",[311,341,343],{"class":342},"sTEyZ"," computed",[311,345,346],{"class":317}," }",[311,348,349],{"class":335}," from",[311,351,352],{"class":317}," '",[311,354,306],{"class":355},"sfazB",[311,357,358],{"class":317},"'\n",[311,360,362],{"class":313,"line":361},3,[311,363,365],{"emptyLinePlaceholder":364},true,"\n",[311,367,369],{"class":313,"line":368},4,[311,370,372],{"class":371},"sHwdD","\u002F\u002F Good: computed caches the result\n",[311,374,376,379,382,385,388,391,394],{"class":313,"line":375},5,[311,377,378],{"class":325},"const",[311,380,381],{"class":342}," chartData ",[311,383,384],{"class":317},"=",[311,386,343],{"class":387},"s2Zo4",[311,389,390],{"class":342},"(",[311,392,393],{"class":317},"()",[311,395,396],{"class":325}," =>\n",[311,398,400,403,406,409,411,414,416,420,423,426,429,432,434,437,440,443,446,448,451,454,456,458,461,464],{"class":313,"line":399},6,[311,401,402],{"class":342},"  rawData",[311,404,405],{"class":317},".",[311,407,408],{"class":342},"value",[311,410,405],{"class":317},[311,412,413],{"class":387},"map",[311,415,390],{"class":342},[311,417,419],{"class":418},"sHdIc","d",[311,421,422],{"class":325}," =>",[311,424,425],{"class":342}," (",[311,427,428],{"class":317},"{",[311,430,431],{"class":317}," ...",[311,433,419],{"class":342},[311,435,436],{"class":317},",",[311,438,439],{"class":321}," total",[311,441,442],{"class":317},":",[311,444,445],{"class":342}," d",[311,447,405],{"class":317},[311,449,450],{"class":342},"a ",[311,452,453],{"class":317},"+",[311,455,445],{"class":342},[311,457,405],{"class":317},[311,459,460],{"class":342},"b ",[311,462,463],{"class":317},"}",[311,465,466],{"class":342},"))\n",[311,468,470],{"class":313,"line":469},7,[311,471,472],{"class":342},")\n",[311,474,476],{"class":313,"line":475},8,[311,477,365],{"emptyLinePlaceholder":364},[311,479,481],{"class":313,"line":480},9,[311,482,483],{"class":371},"\u002F\u002F Bad: recalculates every render\n",[311,485,487],{"class":313,"line":486},10,[311,488,489],{"class":371},"\u002F\u002F :data=\"rawData.map(d => ({ ...d, total: d.a + d.b }))\"\n",[311,491,493,496,498],{"class":313,"line":492},11,[311,494,495],{"class":317},"\u003C\u002F",[311,497,322],{"class":321},[311,499,329],{"class":317},[311,501,503],{"class":313,"line":502},12,[311,504,365],{"emptyLinePlaceholder":364},[311,506,508,510,513],{"class":313,"line":507},13,[311,509,318],{"class":317},[311,511,512],{"class":321},"template",[311,514,329],{"class":317},[311,516,518,521,524,527,530,532,535,538,540],{"class":313,"line":517},14,[311,519,520],{"class":317},"  \u003C",[311,522,523],{"class":321},"LineChart",[311,525,526],{"class":317}," :",[311,528,529],{"class":325},"data",[311,531,384],{"class":317},[311,533,534],{"class":317},"\"",[311,536,537],{"class":342},"chartData",[311,539,534],{"class":317},[311,541,329],{"class":317},[311,543,545,548,551,554,556,558,561,563],{"class":313,"line":544},15,[311,546,547],{"class":317},"    \u003C",[311,549,550],{"class":321},"Line",[311,552,553],{"class":325}," data-key",[311,555,384],{"class":317},[311,557,534],{"class":317},[311,559,560],{"class":355},"total",[311,562,534],{"class":317},[311,564,565],{"class":317}," \u002F>\n",[311,567,569,572,574],{"class":313,"line":568},16,[311,570,571],{"class":317},"  \u003C\u002F",[311,573,523],{"class":321},[311,575,329],{"class":317},[311,577,579,581,583],{"class":313,"line":578},17,[311,580,495],{"class":317},[311,582,512],{"class":321},[311,584,329],{"class":317},[289,586,588],{"id":587},"what-to-expect","What to expect",[285,590,591],{},"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.",[285,593,594],{},"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.",[289,596,598],{"id":597},"disable-animations-for-large-datasets","Disable animations for large datasets",[285,600,601],{},"Each animated element is updated on every frame. With thousands of data points, disable animation:",[302,603,605],{"className":304,"code":604,"language":306,"meta":307,"style":307},"\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",[297,606,607,640,644,675,679],{"__ignoreMap":307},[311,608,609,611,613,615,617,619,621,623,625,628,630,632,636,638],{"class":313,"line":314},[311,610,318],{"class":317},[311,612,550],{"class":321},[311,614,553],{"class":325},[311,616,384],{"class":317},[311,618,534],{"class":317},[311,620,408],{"class":355},[311,622,534],{"class":317},[311,624,526],{"class":317},[311,626,627],{"class":325},"is-animation-active",[311,629,384],{"class":317},[311,631,534],{"class":317},[311,633,635],{"class":634},"sfNiH","false",[311,637,534],{"class":317},[311,639,565],{"class":317},[311,641,642],{"class":313,"line":332},[311,643,365],{"emptyLinePlaceholder":364},[311,645,646,648,651,653,655,657,659,661,663,665,667,669,671,673],{"class":313,"line":361},[311,647,318],{"class":317},[311,649,650],{"class":321},"Bar",[311,652,553],{"class":325},[311,654,384],{"class":317},[311,656,534],{"class":317},[311,658,408],{"class":355},[311,660,534],{"class":317},[311,662,526],{"class":317},[311,664,627],{"class":325},[311,666,384],{"class":317},[311,668,534],{"class":317},[311,670,635],{"class":634},[311,672,534],{"class":317},[311,674,565],{"class":317},[311,676,677],{"class":313,"line":368},[311,678,365],{"emptyLinePlaceholder":364},[311,680,681,683,686,688,690,692,694,696,698,700,702,704,706,708],{"class":313,"line":375},[311,682,318],{"class":317},[311,684,685],{"class":321},"Area",[311,687,553],{"class":325},[311,689,384],{"class":317},[311,691,534],{"class":317},[311,693,408],{"class":355},[311,695,534],{"class":317},[311,697,526],{"class":317},[311,699,627],{"class":325},[311,701,384],{"class":317},[311,703,534],{"class":317},[311,705,635],{"class":634},[311,707,534],{"class":317},[311,709,565],{"class":317},[289,711,713],{"id":712},"sample-large-datasets","Sample large datasets",[285,715,716],{},"Rather than rendering 10,000+ points, downsample your data:",[302,718,720],{"className":304,"code":719,"language":306,"meta":307,"style":307},"\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",[297,721,722,732,750,754,774,793,816,824,856,900,906],{"__ignoreMap":307},[311,723,724,726,728,730],{"class":313,"line":314},[311,725,318],{"class":317},[311,727,322],{"class":321},[311,729,326],{"class":325},[311,731,329],{"class":317},[311,733,734,736,738,740,742,744,746,748],{"class":313,"line":332},[311,735,336],{"class":335},[311,737,339],{"class":317},[311,739,343],{"class":342},[311,741,346],{"class":317},[311,743,349],{"class":335},[311,745,352],{"class":317},[311,747,306],{"class":355},[311,749,358],{"class":317},[311,751,752],{"class":313,"line":361},[311,753,365],{"emptyLinePlaceholder":364},[311,755,756,758,761,763,765,767,769,771],{"class":313,"line":368},[311,757,378],{"class":325},[311,759,760],{"class":342}," sampledData ",[311,762,384],{"class":317},[311,764,343],{"class":387},[311,766,390],{"class":342},[311,768,393],{"class":317},[311,770,422],{"class":325},[311,772,773],{"class":317}," {\n",[311,775,776,779,782,785,788,790],{"class":313,"line":375},[311,777,778],{"class":325},"  const",[311,780,781],{"class":342}," data",[311,783,784],{"class":317}," =",[311,786,787],{"class":342}," rawData",[311,789,405],{"class":317},[311,791,792],{"class":342},"value\n",[311,794,795,798,800,802,804,807,810,814],{"class":313,"line":399},[311,796,797],{"class":335},"  if",[311,799,425],{"class":321},[311,801,529],{"class":342},[311,803,405],{"class":317},[311,805,806],{"class":342},"length",[311,808,809],{"class":317}," \u003C=",[311,811,813],{"class":812},"sbssI"," 500",[311,815,472],{"class":321},[311,817,818,821],{"class":313,"line":469},[311,819,820],{"class":335},"    return",[311,822,823],{"class":342}," data\n",[311,825,826,828,831,833,836,838,841,843,845,847,849,852,854],{"class":313,"line":475},[311,827,778],{"class":325},[311,829,830],{"class":342}," step",[311,832,784],{"class":317},[311,834,835],{"class":342}," Math",[311,837,405],{"class":317},[311,839,840],{"class":387},"ceil",[311,842,390],{"class":321},[311,844,529],{"class":342},[311,846,405],{"class":317},[311,848,806],{"class":342},[311,850,851],{"class":317}," \u002F",[311,853,813],{"class":812},[311,855,472],{"class":321},[311,857,858,861,863,865,868,870,872,875,877,880,883,885,887,890,892,895,898],{"class":313,"line":480},[311,859,860],{"class":335},"  return",[311,862,781],{"class":342},[311,864,405],{"class":317},[311,866,867],{"class":387},"filter",[311,869,390],{"class":321},[311,871,390],{"class":317},[311,873,874],{"class":418},"_",[311,876,436],{"class":317},[311,878,879],{"class":418}," i",[311,881,882],{"class":317},")",[311,884,422],{"class":325},[311,886,879],{"class":342},[311,888,889],{"class":317}," %",[311,891,830],{"class":342},[311,893,894],{"class":317}," ===",[311,896,897],{"class":812}," 0",[311,899,472],{"class":321},[311,901,902,904],{"class":313,"line":486},[311,903,463],{"class":317},[311,905,472],{"class":342},[311,907,908,910,912],{"class":313,"line":492},[311,909,495],{"class":317},[311,911,322],{"class":321},[311,913,329],{"class":317},[289,915,917],{"id":916},"update-data-the-way-you-like","Update data the way you like",[285,919,920,921,924,925,928,929,932,933,936,937,940,941,943],{},"Charts track ",[297,922,923],{},"reactive()"," and ",[297,926,927],{},"ref()"," data deeply. Array replacement, ",[297,930,931],{},"push",", ",[297,934,935],{},"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 ",[297,938,939],{},"shallowRef"," and assign a new array per update. A ",[297,942,939],{}," does not make those rows reactive, so in-place edits to them need an array replacement to notify the chart.",[285,945,946],{},"Hovering is cheap: moving the pointer recomputes only tooltip state, never bar, line or axis geometry.",[289,948,950],{"id":949},"unwrap-reactive-proxies-for-d3","Unwrap reactive proxies for D3",[285,952,953,954,957],{},"D3 scale functions don't work with Vue's reactive Proxy objects. Use ",[297,955,956],{},"toRaw()"," when passing data to D3:",[302,959,961],{"className":304,"code":960,"language":306,"meta":307,"style":307},"\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",[297,962,963,973,992,996,1001,1015],{"__ignoreMap":307},[311,964,965,967,969,971],{"class":313,"line":314},[311,966,318],{"class":317},[311,968,322],{"class":321},[311,970,326],{"class":325},[311,972,329],{"class":317},[311,974,975,977,979,982,984,986,988,990],{"class":313,"line":332},[311,976,336],{"class":335},[311,978,339],{"class":317},[311,980,981],{"class":342}," toRaw",[311,983,346],{"class":317},[311,985,349],{"class":335},[311,987,352],{"class":317},[311,989,306],{"class":355},[311,991,358],{"class":317},[311,993,994],{"class":313,"line":361},[311,995,365],{"emptyLinePlaceholder":364},[311,997,998],{"class":313,"line":368},[311,999,1000],{"class":371},"\u002F\u002F When working with custom scales or D3 utilities\n",[311,1002,1003,1005,1008,1010,1012],{"class":313,"line":375},[311,1004,378],{"class":325},[311,1006,1007],{"class":342}," rawEntry ",[311,1009,384],{"class":317},[311,1011,981],{"class":387},[311,1013,1014],{"class":342},"(entry)\n",[311,1016,1017,1019,1021],{"class":313,"line":399},[311,1018,495],{"class":317},[311,1020,322],{"class":321},[311,1022,329],{"class":317},[285,1024,1025],{},"This is handled internally by vccs, but keep it in mind if you're using D3 utilities directly alongside your charts.",[289,1027,1029],{"id":1028},"avoid-unnecessary-re-renders","Avoid unnecessary re-renders",[1031,1032,1033,1048,1058],"ul",{},[1034,1035,1036,1040,1041,1044,1045,1047],"li",{},[1037,1038,1039],"strong",{},"Stable data references",": Don't create new arrays\u002Fobjects on every render. Use ",[297,1042,1043],{},"ref"," or ",[297,1046,299],{}," to maintain stable references.",[1034,1049,1050,1053,1054,1057],{},[1037,1051,1052],{},"Key prop",": When dynamically switching between charts, use ",[297,1055,1056],{},":key"," to control component identity and avoid stale state.",[1034,1059,1060,1063],{},[1037,1061,1062],{},"Debounce updates",": If data changes rapidly (e.g., real-time feeds), debounce updates to avoid overwhelming the renderer.",[1065,1066,1067],"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":307,"searchDepth":332,"depth":332,"links":1069},[1070,1071,1072,1073,1074,1075,1076],{"id":291,"depth":332,"text":292},{"id":587,"depth":332,"text":588},{"id":597,"depth":332,"text":598},{"id":712,"depth":332,"text":713},{"id":916,"depth":332,"text":917},{"id":949,"depth":332,"text":950},{"id":1028,"depth":332,"text":1029},"Optimize chart rendering for large datasets and complex visualizations","md",null,{},{"icon":61},{"title":58,"description":1077},"QnAVKb7fsiY77dMw3qs3IUeC01w6wuK-iel8PqE-OVc",[1085,1087],{"title":53,"path":54,"stem":55,"description":1086,"icon":56,"children":-1},"Data values, pixels and polar coordinates in charts",{"title":63,"path":64,"stem":65,"description":1088,"icon":66,"children":-1},"Add rounded corners to bar charts using the radius prop",1791811109636]