[{"data":1,"prerenderedAt":2063},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-migration":279,"-getting-started-migration-surround":2058},[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":21,"body":281,"description":2051,"extension":2052,"links":2053,"meta":2054,"navigation":2055,"path":22,"seo":2056,"stem":23,"__hash__":2057},"docs\u002F1.getting-started\u002F3.migration.md",{"type":282,"value":283,"toc":2036},"minimark",[284,288,368,377,382,497,513,517,647,651,974,978,1090,1094,1355,1359,1552,1601,1605,1683,1687,1700,1791,1795,1798],[285,286,287],"p",{},"vccs 1.0 rebuilds every chart on Vue and settles the public API. Most apps need only the\nchecklist below. The sections after it list every change, grouped by what you update, with a\nbefore and after example.",[289,290,291,304,314,329,344,353,360],"ol",{},[292,293,294,295,299,300,303],"li",{},"Install ",[296,297,298],"code",{},"vue@^3.5"," and ",[296,301,302],{},"motion-v@^2.4",".",[292,305,306,307,310,311,303],{},"Replace callback props with Vue events: ",[296,308,309],{},":onClick"," becomes ",[296,312,313],{},"@click",[292,315,316,317,320,321,324,325,328],{},"Use ",[296,318,319],{},"v-model:active-index"," (",[296,322,323],{},"number | null",") on Tooltip, Bar and Pie, and\n",[296,326,327],{},"v-model:range"," on Brush.",[292,330,331,332,335,336,339,340,343],{},"Remove the ",[296,333,334],{},"responsive"," prop and sizing-only ",[296,337,338],{},"ResponsiveContainer"," wrappers; set ",[296,341,342],{},"height","\non the chart.",[292,345,346,347,310,350,303],{},"Import only public components, composables and types; ",[296,348,349],{},"useOffset",[296,351,352],{},"usePlotArea",[292,354,355,356,359],{},"Update CSS selectors to the ",[296,357,358],{},"v-charts-"," classes, and colors to the theming tokens.",[292,361,362,363,303],{},"Rename the props in ",[364,365,367],"a",{"href":366},"#renamed-props","Renamed props",[285,369,370,371,299,373,376],{},"There are no aliases for renamed props. ",[296,372,338],{},[296,374,375],{},"Customized"," still work in\n1.0, warn once in development, and are removed in 2.0.",[378,379,381],"h2",{"id":380},"dependencies-and-setup","Dependencies and setup",[383,384,385,398],"table",{},[386,387,388],"thead",{},[389,390,391,395],"tr",{},[392,393,394],"th",{},"Change",[392,396,397],{},"What to do",[399,400,401,417,442,462,478],"tbody",{},[389,402,403,411],{},[404,405,406,407,299,409,303],"td",{},"The peer dependencies are ",[296,408,298],{},[296,410,302],{},[404,412,413,414],{},"Update both. ",[296,415,416],{},"pnpm add vue@^3.5 motion-v@^2.4",[389,418,419,425],{},[404,420,421,422,424],{},"Charts are responsive by default. The ",[296,423,334],{}," prop is removed.",[404,426,427,428,431,432,435,436,299,439,441],{},"Before: ",[296,429,430],{},"\u003CBarChart responsive :height=\"300\">",". After: ",[296,433,434],{},"\u003CBarChart :height=\"300\">",". Set numeric ",[296,437,438],{},"width",[296,440,342],{}," for a fixed size.",[389,443,444,454],{},[404,445,446,448,449,299,451,453],{},[296,447,338],{}," is deprecated and no longer passes ",[296,450,438],{},[296,452,342],{}," to its child.",[404,455,427,456,431,459,303],{},[296,457,458],{},"\u003CResponsiveContainer width=\"100%\" :height=\"300\">\u003CBarChart>…\u003C\u002FBarChart>\u003C\u002FResponsiveContainer>",[296,460,461],{},"\u003CBarChart :height=\"300\">…\u003C\u002FBarChart>",[389,463,464,469],{},[404,465,466,468],{},[296,467,338],{}," reports resizes as an event.",[404,470,427,471,431,474,477],{},[296,472,473],{},"\u003CResponsiveContainer :on-resize=\"resize\" \u002F>",[296,475,476],{},"\u003CResponsiveContainer @resize=\"resize\" \u002F>",", or remove the wrapper.",[389,479,480,485],{},[404,481,482,484],{},[296,483,375],{}," is deprecated.",[404,486,427,487,490,491,494,495,303],{},[296,488,489],{},"\u003CCustomized>\u003Ctemplate #default=\"{ offset }\">…\u003C\u002Ftemplate>\u003C\u002FCustomized>",". After: a child component in the chart's default slot that calls ",[296,492,493],{},"usePlotArea()",". See ",[364,496,275],{"href":276},[285,498,499,500,503,504,320,507,510,511,303],{},"New in 1.0, with nothing to migrate: a Nuxt 4 module (",[296,501,502],{},"vccs\u002Fnuxt",") and a resolver for\n",[296,505,506],{},"unplugin-vue-components",[296,508,509],{},"vccs\u002Fresolver","). See ",[364,512,16],{"href":17},[378,514,516],{"id":515},"templates-models-and-events","Templates: models and events",[383,518,519,527],{},[386,520,521],{},[389,522,523,525],{},[392,524,394],{},[392,526,397],{},[399,528,529,565,581,601,622],{},[389,530,531,545],{},[404,532,533,534,536,537,540,541,544],{},"Callback props (",[296,535,309],{},", ",[296,538,539],{},":onAnimationEnd",", Brush ",[296,542,543],{},"onChange",", …) are Vue events.",[404,546,427,547,431,550,553,554,299,557,560,561,564],{},[296,548,549],{},"\u003CBar :onClick=\"select\" \u002F>",[296,551,552],{},"\u003CBar @click=\"select\" \u002F>","; also ",[296,555,556],{},"@animation-end",[296,558,559],{},"@change",". JSX ",[296,562,563],{},"onClick={…}"," keeps working.",[389,566,567,573],{},[404,568,569,570,303],{},"Item events receive ",[296,571,572],{},"(item, index, event)",[404,574,427,575,431,578,303],{},[296,576,577],{},"function select(item, event) { … }",[296,579,580],{},"function select(item, index, event) { … }",[389,582,583,589],{},[404,584,585,586,588],{},"Active models use ",[296,587,323],{},". A value you pass controls the display on Tooltip, Bar and Pie.",[404,590,427,591,431,594,597,598,303],{},[296,592,593],{},"\u003CBar :active-index=\"-1\" data-key=\"value\" \u002F>",[296,595,596],{},"\u003CBar v-model:active-index=\"active\" data-key=\"value\" \u002F>",", with ",[296,599,600],{},"ref\u003Cnumber | null>(null)",[389,602,603,606],{},[404,604,605],{},"Brush uses one nullable range model. A range you pass is controlled by the parent.",[404,607,427,608,431,611,597,614,617,618,621],{},[296,609,610],{},"\u003CBrush :start-index=\"from\" :end-index=\"to\" :on-change=\"r => { from = r.startIndex; to = r.endIndex }\" \u002F>",[296,612,613],{},"\u003CBrush v-model:range=\"range\" \u002F>",[296,615,616],{},"ref\u003CBrushStartEndIndex | null>({ startIndex: 0, endIndex: 5 })",". ",[296,619,620],{},"null"," shows all rows and hides the travellers. Bounds are floored, clamped and ordered.",[389,623,624,634],{},[404,625,626,627,630,631,303],{},"Treemap, Sankey and SunburstChart support the keyboard, so ",[296,628,629],{},"node-click"," can receive a ",[296,632,633],{},"KeyboardEvent",[404,635,427,636,431,639,642,643,646],{},[296,637,638],{},"(node, index, event: MouseEvent)",[296,640,641],{},"(node, index, event: MouseEvent | KeyboardEvent)",". Check ",[296,644,645],{},"event instanceof MouseEvent"," before you read pointer coordinates.",[378,648,650],{"id":649},"templates-props","Templates: props",[383,652,653,661],{},[386,654,655],{},[389,656,657,659],{},[392,658,394],{},[392,660,397],{},[399,662,663,693,741,761,785,805,826,843,863,878,934,955],{},[389,664,665,679],{},[404,666,667,668,299,671,674,675,678],{},"Line and Area ",[296,669,670],{},"dot",[296,672,673],{},"activeDot"," accept ",[296,676,677],{},"boolean"," or an options object. A function was ignored.",[404,680,427,681,684,685,688,689,692],{},[296,682,683],{},":dot=\"renderDot\""," (ignored). After: ",[296,686,687],{},"\u003Ctemplate #dot=\"p\">…\u003C\u002Ftemplate>",", and ",[296,690,691],{},"#activeDot"," for the active dot.",[389,694,695,732],{},[404,696,697,698,536,701,536,704,536,707,536,710,536,713,536,716,536,718,536,720,536,723,536,726,536,729,303],{},"Line and Area no longer accept internal geometry or active-point props: ",[296,699,700],{},"points",[296,702,703],{},"path",[296,705,706],{},"baseLine",[296,708,709],{},"layout",[296,711,712],{},"left",[296,714,715],{},"top",[296,717,438],{},[296,719,342],{},[296,721,722],{},"animationId",[296,724,725],{},"activePoint",[296,727,728],{},"needClip",[296,730,731],{},"activeIndex",[404,733,427,734,431,737,740],{},[296,735,736],{},"\u003CLine data-key=\"value\" :points=\"points\" \u002F>",[296,738,739],{},"\u003CLine data-key=\"value\" \u002F>",". Set data, layout and size on the chart; use the series slots for custom shapes.",[389,742,743,752],{},[404,744,745,746,299,748,751],{},"Bar no longer accepts the internal ",[296,747,728],{},[296,749,750],{},"id"," props.",[404,753,427,754,431,757,760],{},[296,755,756],{},"\u003CBar data-key=\"value\" id=\"bars\" :need-clip=\"true\" \u002F>",[296,758,759],{},"\u003CBar data-key=\"value\" \u002F>",". Axis overflow settings control clipping.",[389,762,763,776],{},[404,764,765,766,536,769,772,773,303],{},"Legend no longer accepts ",[296,767,768],{},"chartWidth",[296,770,771],{},"chartHeight"," or ",[296,774,775],{},"margin",[404,777,427,778,431,781,784],{},[296,779,780],{},"\u003CLegend :chart-width=\"500\" :margin=\"margin\" \u002F>",[296,782,783],{},"\u003CLegend \u002F>",". Set the size and margin on the chart.",[389,786,787,796],{},[404,788,789,790,772,793,303],{},"Label no longer accepts ",[296,791,792],{},"parentViewBox",[296,794,795],{},"index",[404,797,427,798,431,801,804],{},[296,799,800],{},"\u003CLabel :parent-view-box=\"box\" :index=\"0\" value=\"A\" \u002F>",[296,802,803],{},"\u003CLabel :view-box=\"box\" value=\"A\" \u002F>",". Use a LabelList content slot when you need the item index.",[389,806,807,817],{},[404,808,809,810,299,813,816],{},"Each chart family accepts only its own props. ",[296,811,812],{},"to",[296,814,815],{},"throttleDelay"," are removed.",[404,818,427,819,431,822,825],{},[296,820,821],{},"\u003CBarChart :cx=\"100\" :throttle-delay=\"50\" \u002F>",[296,823,824],{},"\u003CBarChart \u002F>",". Pie and Radar charts drop the bar sizing props, Funnel charts drop bar sizing and polar props. These props had no effect.",[389,827,828,835],{},[404,829,830,831,834],{},"The chart ",[296,832,833],{},"dataKey"," prop is removed. It was never read.",[404,836,427,837,431,840,303],{},[296,838,839],{},"\u003CBarChart data-key=\"x\">",[296,841,842],{},"\u003CBarChart>",[389,844,845,852],{},[404,846,847,848,851],{},"The Brush ",[296,849,850],{},"data"," prop is removed. It was never read; Brush always uses the chart data.",[404,853,427,854,431,857,597,860,862],{},[296,855,856],{},"\u003CBrush :data=\"rows\" \u002F>",[296,858,859],{},"\u003CBrush \u002F>",[296,861,850],{}," on the chart.",[389,864,865,868],{},[404,866,867],{},"Series inherit the chart's animation settings; a series prop still overrides them.",[404,869,427,870,873,874,877],{},[296,871,872],{},":is-animation-active=\"false\""," on every series. After: ",[296,875,876],{},"\u003CBarChart :is-animation-active=\"false\">"," once.",[389,879,880,914],{},[404,881,882,883,536,886,536,889,299,892,895,896,536,899,536,902,536,905,536,908,299,911,303],{},"XAxis and YAxis type ",[296,884,885],{},"orientation",[296,887,888],{},"type",[296,890,891],{},"padding",[296,893,894],{},"scale",", and declare ",[296,897,898],{},"tick",[296,900,901],{},"angle",[296,903,904],{},"label",[296,906,907],{},"name",[296,909,910],{},"stroke",[296,912,913],{},"tickSize",[404,915,427,916,919,920,772,922,688,925,927,928,772,931,303],{},[296,917,918],{},"\u003CXAxis orientation=\"sideways\" \u002F>"," compiled. After: it is a type error; YAxis accepts ",[296,921,712],{},[296,923,924],{},"right",[296,926,891],{}," accepts the axis object, ",[296,929,930],{},"gap",[296,932,933],{},"no-gap",[389,935,936,946],{},[404,937,938,939,942,943,303],{},"YAxis defaults ",[296,940,941],{},"yAxisId"," to ",[296,944,945],{},"0",[404,947,427,948,431,951,954],{},[296,949,950],{},"\u003CYAxis :y-axis-id=\"0\" \u002F>",[296,952,953],{},"\u003CYAxis \u002F>",". Explicit ids still work.",[389,956,957,968],{},[404,958,959,960,963,964,967],{},"Brush no longer declares an ",[296,961,962],{},"ariaLabel"," prop, so ",[296,965,966],{},"aria-label"," reaches the brush group.",[404,969,427,970,973],{},[296,971,972],{},"\u003CBrush aria-label=\"Date range\" \u002F>"," was dropped. After: the same template labels the brush.",[975,976,367],"h3",{"id":977},"renamed-props",[383,979,980,992],{},[386,981,982],{},[389,983,984,986,989],{},[392,985,394],{},[392,987,988],{},"Before",[392,990,991],{},"After",[399,993,994,1009,1024,1040,1055,1070],{},[389,995,996,999,1004],{},[404,997,998],{},"Tooltip content",[404,1000,1001],{},[296,1002,1003],{},"\u003CTooltip :content=\"renderTooltip\" \u002F>",[404,1005,1006],{},[296,1007,1008],{},"\u003CTooltip>\u003Ctemplate #content=\"props\">…\u003C\u002Ftemplate>\u003C\u002FTooltip>",[389,1010,1011,1014,1019],{},[404,1012,1013],{},"Tooltip default slot",[404,1015,1016],{},[296,1017,1018],{},"\u003CTooltip>\u003Cdiv>…\u003C\u002Fdiv>\u003C\u002FTooltip>",[404,1020,1021],{},[296,1022,1023],{},"\u003CTooltip>\u003Ctemplate #content>\u003Cdiv>…\u003C\u002Fdiv>\u003C\u002Ftemplate>\u003C\u002FTooltip>",[389,1025,1026,1029,1034],{},[404,1027,1028],{},"Tooltip teleport target",[404,1030,1031],{},[296,1032,1033],{},"\u003CTooltip :portal=\"element\" \u002F>",[404,1035,1036,1039],{},[296,1037,1038],{},"\u003CTooltip :to=\"element\" \u002F>","; a CSS selector also works",[389,1041,1042,1045,1050],{},[404,1043,1044],{},"Legend teleport target",[404,1046,1047],{},[296,1048,1049],{},"\u003CLegend :portal=\"element\" \u002F>",[404,1051,1052,1039],{},[296,1053,1054],{},"\u003CLegend :to=\"element\" \u002F>",[389,1056,1057,1060,1065],{},[404,1058,1059],{},"Treemap palette",[404,1061,1062],{},[296,1063,1064],{},"\u003CTreemap :color-panel=\"palette\" \u002F>",[404,1066,1067],{},[296,1068,1069],{},"\u003CTreemap :colors=\"palette\" \u002F>",[389,1071,1072,1075,1080],{},[404,1073,1074],{},"Treemap tile proportions",[404,1076,1077],{},[296,1078,1079],{},"\u003CTreemap :aspect-ratio=\"1\" \u002F>",[404,1081,1082,1085,1086,1089],{},[296,1083,1084],{},"\u003CTreemap :tile-aspect-ratio=\"1\" \u002F>","; ",[296,1087,1088],{},"aspect"," now sets the chart's proportions",[378,1091,1093],{"id":1092},"imports-and-types","Imports and types",[383,1095,1096,1104],{},[386,1097,1098],{},[389,1099,1100,1102],{},[392,1101,394],{},[392,1103,397],{},[399,1105,1106,1129,1144,1157,1192,1241,1262,1287,1303,1319,1335],{},[389,1107,1108,1118],{},[404,1109,1110,1111,536,1114,1117],{},"Internal contexts, payload searchers, path builders, ",[296,1112,1113],{},"Global",[296,1115,1116],{},"*VueProps"," and internal types are no longer exported.",[404,1119,427,1120,431,1123,299,1126,303],{},[296,1121,1122],{},"import { LineVueProps, getPath } from 'vccs'",[296,1124,1125],{},"import { Curve } from 'vccs'",[296,1127,1128],{},"import type { LineProps } from 'vccs'",[389,1130,1131,1136],{},[404,1132,1133,1135],{},[296,1134,349],{}," is removed.",[404,1137,427,1138,431,1141,303],{},[296,1139,1140],{},"const { left, top } = useOffset().value",[296,1142,1143],{},"const { x, y } = usePlotArea().value",[389,1145,1146,1149],{},[404,1147,1148],{},"Composables keep their runtime nullability in the types.",[404,1150,427,1151,431,1154,303],{},[296,1152,1153],{},"useActiveTooltipCoordinate().value.x",[296,1155,1156],{},"useActiveTooltipCoordinate().value?.x",[389,1158,1159,1189],{},[404,1160,1161,1162,1165,1166,1169,1170,1085,1173,1176,1177,299,1180,1085,1183,1186,1187,303],{},"Every public ",[296,1163,1164],{},"XxxProps"," type comes from its component's props. ",[296,1167,1168],{},"LineProps"," no longer has ",[296,1171,1172],{},"animateNewValues",[296,1174,1175],{},"FunnelProps"," has ",[296,1178,1179],{},"fill",[296,1181,1182],{},"class",[296,1184,1185],{},"CartesianAxisProps"," no longer requires ",[296,1188,894],{},[404,1190,1191],{},"Remove props the component never had.",[389,1193,1194,1227],{},[404,1195,1196,1199,1200,536,1203,536,1206,536,1209,536,1212,536,1215,536,1218,617,1221,1223,1224,303],{},[296,1197,1198],{},"*PropsWithSVG"," types are removed: ",[296,1201,1202],{},"LinePropsWithSVG",[296,1204,1205],{},"FunnelPropsWithSVG",[296,1207,1208],{},"LegendPropsWithSVG",[296,1210,1211],{},"PiePropsWithSVG",[296,1213,1214],{},"RadialBarPropsWithSVG",[296,1216,1217],{},"RectanglePropsWithSVG",[296,1219,1220],{},"SectorPropsWithSVG",[296,1222,1164],{}," holds the declared props and events only; templates still accept SVG attributes such as ",[296,1225,1226],{},"stroke-dasharray",[404,1228,427,1229,431,1231,1233,1234,1237,1238,303],{},[296,1230,1202],{},[296,1232,1168],{},". Type SVG attributes you pass in code as ",[296,1235,1236],{},"SVGAttributes"," from ",[296,1239,1240],{},"vue",[389,1242,1243,1257],{},[404,1244,1245,1246,310,1249,688,1252,310,1255,303],{},"The trapezoid geometry type is renamed: ",[296,1247,1248],{},"TrapezoidProps",[296,1250,1251],{},"TrapezoidItem",[296,1253,1254],{},"TrapezoidComponentProps",[296,1256,1248],{},[404,1258,1259,1261],{},[296,1260,1164],{}," always means a component's props. Rename the imports.",[389,1263,1264,1274],{},[404,1265,1266,1267,299,1270,1273],{},"Bar ",[296,1268,1269],{},"#shape",[296,1271,1272],{},"#activeBar"," slots receive numeric geometry.",[404,1275,427,1276,1279,1280,431,1283,1286],{},[296,1277,1278],{},"#shape=\"{ x }\""," could receive ",[296,1281,1282],{},"undefined",[296,1284,1285],{},"x"," is a number; a bar without geometry calls no slot.",[389,1288,1289,1296],{},[404,1290,1291,1292,1295],{},"Scatter payloads omit ",[296,1293,1294],{},"tooltipPosition"," when a coordinate is missing.",[404,1297,1298,1299,1302],{},"Guard ",[296,1300,1301],{},"point.tooltipPosition"," before you read it.",[389,1304,1305,1314],{},[404,1306,1307,1310,1311,303],{},[296,1308,1309],{},"Point"," has one definition, with an optional readonly ",[296,1312,1313],{},"payload",[404,1315,1316,1317,303],{},"Nothing, unless you built objects that must not have ",[296,1318,1313],{},[389,1320,1321,1328],{},[404,1322,1323,1324,1327],{},"Folder entry points such as ",[296,1325,1326],{},"vccs\u002Fsrc\u002Fcartesian"," are gone.",[404,1329,1330,1331,1334],{},"Import from ",[296,1332,1333],{},"vccs"," only.",[389,1336,1337,1343],{},[404,1338,1339,1340,303],{},"The transition type is ",[296,1341,1342],{},"ChartTransition",[404,1344,427,1345,1348,1349,1352,1353,303],{},[296,1346,1347],{},"const transition = { duration: 0.2 }",", typed with a motion-v type. After: ",[296,1350,1351],{},"const transition: ChartTransition = { duration: 0.2 }",", imported from ",[296,1354,1333],{},[378,1356,1358],{"id":1357},"styles-and-colors","Styles and colors",[383,1360,1361,1369],{},[386,1362,1363],{},[389,1364,1365,1367],{},[392,1366,394],{},[392,1368,397],{},[399,1370,1371,1406,1424,1439,1465,1479,1493,1518,1531],{},[389,1372,1373,1386],{},[404,1374,1375,1376,1378,1379,299,1382,1385],{},"All classes use the ",[296,1377,358],{}," prefix in kebab case. The unprefixed ",[296,1380,1381],{},"xAxis",[296,1383,1384],{},"yAxis"," classes are removed.",[404,1387,427,1388,536,1391,536,1394,431,1397,536,1400,536,1403,303],{},[296,1389,1390],{},".vcharts-surface",[296,1392,1393],{},".recharts-brush-traveller",[296,1395,1396],{},".v-charts-errorBar",[296,1398,1399],{},".v-charts-surface",[296,1401,1402],{},".v-charts-brush-traveller",[296,1404,1405],{},".v-charts-error-bar",[389,1407,1408,1414],{},[404,1409,1410,1411,303],{},"Default colors are CSS variables, for example ",[296,1412,1413],{},"stroke=\"var(--v-charts-grid, #ccc)\"",[404,1415,427,1416,1419,1420,1423],{},[296,1417,1418],{},"[stroke='#ccc'] { … }",". After: set the tokens on the ",[364,1421,1422],{"href":94},"Theming"," page.",[389,1425,1426,1436],{},[404,1427,1428,1429,942,1432,1435],{},"Series without a color take ",[296,1430,1431],{},"--v-charts-series-1",[296,1433,1434],{},"--v-charts-series-8",". Bar and Scatter have a default fill.",[404,1437,1438],{},"Set the numbered tokens, or give each series an explicit color.",[389,1440,1441,1459],{},[404,1442,1443,1444,942,1447,1449,1450,1452,1453,1455,1456,303],{},"Bar no longer sets ",[296,1445,1446],{},"strokeWidth",[296,1448,945],{},", so a ",[296,1451,910],{}," shows. React-style attributes such as ",[296,1454,1446],{}," reach the SVG as ",[296,1457,1458],{},"stroke-width",[404,1460,1461,1462,1464],{},"Remove a ",[296,1463,910],{}," you did not want to see.",[389,1466,1467,1470],{},[404,1468,1469],{},"Tooltip text uses the tooltip foreground, and series colors move to swatches. Legend items contain native buttons.",[404,1471,1472,1473,299,1476,303],{},"Style ",[296,1474,1475],{},".v-charts-tooltip-swatch",[296,1477,1478],{},".v-charts-legend-item button",[389,1480,1481,1487],{},[404,1482,1483,1484,303],{},"Text on known opaque fills is black or white. Variable and translucent fills use ",[296,1485,1486],{},"--v-charts-label-foreground",[404,1488,1489,1490,1492],{},"Set ",[296,1491,1486],{}," for custom fills, and check both themes.",[389,1494,1495,1509],{},[404,1496,1266,1497,1499,1500,1503,1504,1506,1507,303],{},[296,1498,1182],{}," is set once on the series layer (",[296,1501,1502],{},"[data-slot=series].v-charts-bar","), not on every rectangle. Every series layer gets its ",[296,1505,1182],{},"; Scatter, Radar and RadialBar accept ",[296,1508,1182],{},[404,1510,427,1511,1514,1515,303],{},[296,1512,1513],{},".my-bars { … }"," matched each rect. After: ",[296,1516,1517],{},".my-bars .v-charts-bar-rectangle { … }",[389,1519,1520,1526],{},[404,1521,1522,1525],{},[296,1523,1524],{},"\u003CArea stroke=\"none\">"," hides the outline; the legend, tooltip and active dot then use the fill. The Area active dot uses the stroke color (it used the fill).",[404,1527,1489,1528,1530],{},[296,1529,910],{}," to the color you want on the outline and the active dot.",[389,1532,1533,1539],{},[404,1534,1535,1536,303],{},"Pie, RadialBar and Funnel tooltip swatches show the entry color, and Scatter swatches the series fill. The Pie legend and Funnel labels use ",[296,1537,1538],{},"\u003CCell fill>",[404,1540,1541,1542,299,1545,1547,1548,1551],{},"Read ",[296,1543,1544],{},"color",[296,1546,1179],{}," from the ",[296,1549,1550],{},"#content"," payload if you draw your own swatch.",[285,1553,1554,1555,1558,1559,536,1562,536,1565,536,1568,536,1571,536,1574,1577,1578,536,1581,536,1584,536,1587,536,1590,536,1593,536,1596,299,1599,303],{},"Style chart parts with ",[296,1556,1557],{},"data-slot",": ",[296,1560,1561],{},"chart",[296,1563,1564],{},"surface",[296,1566,1567],{},"plot",[296,1569,1570],{},"grid",[296,1572,1573],{},"x-axis",[296,1575,1576],{},"y-axis",",\n",[296,1579,1580],{},"angle-axis",[296,1582,1583],{},"radius-axis",[296,1585,1586],{},"series",[296,1588,1589],{},"tooltip",[296,1591,1592],{},"legend",[296,1594,1595],{},"brush",[296,1597,1598],{},"cell",[296,1600,904],{},[378,1602,1604],{"id":1603},"accessible-names-and-markup","Accessible names and markup",[383,1606,1607,1615],{},[386,1608,1609],{},[389,1610,1611,1613],{},[392,1612,394],{},[392,1614,397],{},[399,1616,1617,1638,1657,1669],{},[389,1618,1619,1628],{},[404,1620,1621,1622,299,1625,303],{},"Every chart has an accessible name, and accepts ",[296,1623,1624],{},"title",[296,1626,1627],{},"desc",[404,1629,1630,1631,1634,1635,303],{},"Before: no name. After: ",[296,1632,1633],{},"\u003CBarChart title=\"Visits\" desc=\"Visits per month\">","; the default is the chart type, for example ",[296,1636,1637],{},"Bar chart",[389,1639,1640,1643],{},[404,1641,1642],{},"Item attributes use the vccs prefix.",[404,1644,427,1645,536,1648,431,1651,536,1654,303],{},[296,1646,1647],{},"data-recharts-item-index",[296,1649,1650],{},"data-recharts-item-data-key",[296,1652,1653],{},"data-v-charts-item-index",[296,1655,1656],{},"data-v-charts-item-data-key",[389,1658,1659,1662],{},[404,1660,1661],{},"Brush travellers announce category indexes instead of pixel coordinates.",[404,1663,1664,1665,1668],{},"Read positions from geometry attributes; ",[296,1666,1667],{},"aria-value*"," describes the data range.",[389,1670,1671,1677],{},[404,1672,1673,1674,303],{},"Generated SVG ids use Vue's ",[296,1675,1676],{},"useId()",[404,1678,1679,1680,1682],{},"Do not select elements by generated ids; pass ",[296,1681,750],{}," to the chart for a stable one.",[378,1684,1686],{"id":1685},"tooltip-payloads-of-treemap-and-sankey","Tooltip payloads of Treemap and Sankey",[285,1688,1689,1690,1692,1693,1696,1697,1699],{},"Treemap and Sankey give the tooltip the same payload shape as the cartesian charts: ",[296,1691,1313],{},"\nis your node or link, and ",[296,1694,1695],{},"value"," is the raw number. One ",[296,1698,1550],{}," template works for every\nchart.",[383,1701,1702,1710],{},[386,1703,1704],{},[389,1705,1706,1708],{},[392,1707,394],{},[392,1709,397],{},[399,1711,1712,1748,1760,1772],{},[389,1713,1714,1731],{},[404,1715,1716,1719,1720,1723,1724,536,1727,1730],{},[296,1717,1718],{},"payload[0].payload"," is your own node or link object. Before it was a copy with an internal ",[296,1721,1722],{},"tooltipIndex",", and for Sankey with layout fields (",[296,1725,1726],{},"x0",[296,1728,1729],{},"y0",", …).",[404,1732,427,1733,1736,1737,1739,1740,1743,1744,1747],{},[296,1734,1735],{},"payload[0].payload.tooltipIndex",". After: read your own fields from ",[296,1738,1718],{},". Layout fields come with the ",[296,1741,1742],{},"node-*"," events and the ",[296,1745,1746],{},"#node"," slot.",[389,1749,1750,1757],{},[404,1751,1752,1753,1756],{},"A Tooltip ",[296,1754,1755],{},"formatter"," receives the raw value and wins over a chart's default formatter.",[404,1758,1759],{},"Nothing. Before, a chart default could hide your formatter.",[389,1761,1762,1769],{},[404,1763,1764,1765,1768],{},"A Treemap parent node shows its real name and the sum of its leaves. Before it showed ",[296,1766,1767],{},"root"," and its own field.",[404,1770,1771],{},"Nothing.",[389,1773,1774,1786],{},[404,1775,1776,1777,1779,1780,1783,1784,303],{},"The Label ",[296,1778,1550],{}," slot receives the normalized ",[296,1781,1782],{},"viewBox",": missing sizes and angles are ",[296,1785,945],{},[404,1787,1788,1789,303],{},"Nothing, unless you checked for ",[296,1790,1282],{},[378,1792,1794],{"id":1793},"behavior-changes","Behavior changes",[285,1796,1797],{},"These changes need no code change in most apps.",[383,1799,1800,1808],{},[386,1801,1802],{},[389,1803,1804,1806],{},[392,1805,394],{},[392,1807,397],{},[399,1809,1810,1825,1835,1842,1857,1868,1882,1901,1912,1933,1944,1951,1975,1993,2007,2021],{},[389,1811,1812,1818],{},[404,1813,1814,1815,1817],{},"Elements share one default timing: 1 s enter, 0.5 s update, 0.3 s exit (see ",[364,1816,78],{"href":79},"). Lines appear with a left-to-right sweep instead of drawing their stroke.",[404,1819,1820,1821,1824],{},"Pass ",[296,1822,1823],{},":transition"," to keep a custom timing.",[389,1826,1827,1830],{},[404,1828,1829],{},"Charts follow a resize at once; only data changes animate. Axis ticks and grid lines animate with the series.",[404,1831,1489,1832,1834],{},[296,1833,872],{}," on the chart to keep it still.",[389,1836,1837,1840],{},[404,1838,1839],{},"Series hidden from the legend animate out and back in.",[404,1841,1771],{},[389,1843,1844,1847],{},[404,1845,1846],{},"Legend entries and tooltip rows keep the data or series order. Before, they were sorted by name.",[404,1848,1820,1849,1852,1853,1856],{},[296,1850,1851],{},"item-sorter=\"value\""," (Legend) or ",[296,1854,1855],{},"item-sorter=\"name\""," (Tooltip) to sort as before.",[389,1858,1859,1862],{},[404,1860,1861],{},"An uncontrolled Brush keeps its window when data updates. Before, it snapped back to the last row on every new array.",[404,1863,1864,1865,303],{},"Nothing. Rows added while the window ends at the last row move it forward with the same width; removed rows clamp it. A moved window emits ",[296,1866,1867],{},"update:range",[389,1869,1870,1879],{},[404,1871,1872,1875,1876,303],{},[296,1873,1874],{},"Pie"," respects ",[296,1877,1878],{},"hide",[404,1880,1881],{},"Remove workarounds for a hidden pie that still rendered.",[389,1883,1884,1898],{},[404,1885,1886,1887,536,1890,1893,1894,1897],{},"Non-finite values (",[296,1888,1889],{},"Infinity",[296,1891,1892],{},"NaN",") count as missing. Numeric strings (",[296,1895,1896],{},"\"12\"",") count as numbers in Pie, Funnel, Treemap and SunburstChart. Sankey drops links to missing nodes and links that close a cycle, with a development warning.",[404,1899,1900],{},"Nothing, unless you relied on the old output.",[389,1902,1903,1909],{},[404,1904,1905,1908],{},[296,1906,1907],{},"allowDataOverflow"," on one axis clips only that axis (Line, Bar), and Area clips like Line.",[404,1910,1911],{},"Nothing. Before, both axes were clipped and Area never was.",[389,1913,1914,1924],{},[404,1915,1916,1919,1920,1923],{},[296,1917,1918],{},"reverseStackOrder"," works: ",[296,1921,1922],{},"true"," puts the last stacked series at the base, as in Recharts.",[404,1925,1926,1927,299,1929,1932],{},"Before, ",[296,1928,1922],{},[296,1930,1931],{},"false"," drew the same stack. Remove the prop if you relied on that.",[389,1934,1935,1941],{},[404,1936,830,1937,1940],{},[296,1938,1939],{},"role"," prop applies to the SVG (or to the wrapper with the accessibility layer).",[404,1942,1943],{},"Nothing. Before, it was dropped.",[389,1945,1946,1949],{},[404,1947,1948],{},"Funnel marks the hovered trapezoid active, as keyboard selection did. In a ComposedChart, the Scatter point at the active index is enlarged.",[404,1950,1771],{},[389,1952,1953,1967],{},[404,1954,1955,1956,1959,1960,1962,1963,1966],{},"A function ",[296,1957,1958],{},"data-key"," no longer shows its source code as a name. Pie and Funnel accept ",[296,1961,907],{},", and a Pie sector without a ",[296,1964,1965],{},"name-key"," value is named by its row index.",[404,1968,1489,1969,1971,1972,1974],{},[296,1970,907],{}," on the series, or ",[296,1973,1965],{}," on the Pie.",[389,1976,1977,1985],{},[404,1978,1979,1980,1982,1983,303],{},"Radar legend values and Radar and RadialBar tooltip names use ",[296,1981,907],{},", then a string ",[296,1984,833],{},[404,1986,1489,1987,1989,1990,1992],{},[296,1988,907],{}," when ",[296,1991,833],{}," is a function.",[389,1994,1995,2005],{},[404,1996,1997,1998,2000,2001,2004],{},"Series tooltip entries carry the series ",[296,1999,1446],{}," (Line default ",[296,2002,2003],{},"1",").",[404,2006,1771],{},[389,2008,2009,2018],{},[404,2010,2011,2012,299,2015,2004],{},"Numeric and string axis ids name the same axis (",[296,2013,2014],{},"y-axis-id=\"1\"",[296,2016,2017],{},":y-axis-id=\"1\"",[404,2019,2020],{},"Nothing. Before, a mix created a second, empty axis.",[389,2022,2023,2033],{},[404,2024,2025,2026,310,2029,2032],{},"PolarGrid polygon paths drop their spaces (",[296,2027,2028],{},"M x,yL x,y",[296,2030,2031],{},"Mx,yLx,y","). The geometry is the same.",[404,2034,2035],{},"Update snapshot tests.",{"title":2037,"searchDepth":2038,"depth":2038,"links":2039},"",2,[2040,2041,2042,2046,2047,2048,2049,2050],{"id":380,"depth":2038,"text":381},{"id":515,"depth":2038,"text":516},{"id":649,"depth":2038,"text":650,"children":2043},[2044],{"id":977,"depth":2045,"text":367},3,{"id":1092,"depth":2038,"text":1093},{"id":1357,"depth":2038,"text":1358},{"id":1603,"depth":2038,"text":1604},{"id":1685,"depth":2038,"text":1686},{"id":1793,"depth":2038,"text":1794},"Breaking changes in vccs 1.0 and how to update","md",null,{},{"icon":24},{"title":21,"description":2051},"TxJ_-20bJpEMIIvmqScQEWGLU_uvjVm3qW07ql4gKzk",[2059,2061],{"title":16,"path":17,"stem":18,"description":2060,"icon":19,"children":-1},"How to install vccs and start building charts",{"title":33,"path":34,"stem":35,"description":2062,"icon":36,"children":-1},"Learn how to customize chart appearance using slots, Cell, and SVG attributes",1791811109636]