[{"data":1,"prerenderedAt":1420},["ShallowReactive",2],{"navigation_docs":3,"-charts-sunburst-chart":284,"-charts-sunburst-chart-surround":1415},[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":178,"body":286,"description":1408,"extension":1409,"links":1410,"meta":1411,"navigation":1412,"path":179,"seo":1413,"stem":180,"__hash__":1414},"docs\u002F3.charts\u002F11.sunburst-chart.md",{"type":287,"value":288,"toc":1399},"minimark",[289,293,303,308,314,318,329,600,640,644,1019,1022,1026,1105,1137,1141,1187,1197,1312,1316,1326,1369,1374,1378,1395],[290,291,292],"p",{},"A sunburst chart shows a tree as rings. The inner ring holds the top-level groups; each ring further out holds their children. The angle of a sector is proportional to its value.",[290,294,295,296,299,300,302],{},"Use it for two or three levels of a part-to-whole hierarchy. For a flat list of parts, a ",[297,298,144],"a",{"href":145}," is easier to read; for many leaves, use a ",[297,301,173],{"href":174},".",[304,305,307],"h2",{"id":306},"simple-sunburst","Simple Sunburst",[309,310],"chart-demo",{"description":311,"name":312,"src":313},"Visits by channel and source. Hover or focus the chart to see each sector.","Traffic Sources","sunburst-charts\u002Fsimple-sunburst-chart",[304,315,317],{"id":316},"data-structure","Data structure",[290,319,320,324,325,328],{},[321,322,323],"code",{},"data"," is one root object, not an array. The root itself is not drawn; its ",[321,326,327],{},"children"," form the inner ring.",[330,331,336],"pre",{"className":332,"code":333,"language":334,"meta":335,"style":335},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { SunburstData } from 'vccs'\n\nconst data: SunburstData = {\n  name: 'Traffic',\n  children: [\n    {\n      name: 'Search',\n      fill: '#f97316',\n      children: [\n        { name: 'Google', value: 420 },\n        { name: 'Bing', value: 90 },\n      ],\n    },\n    { name: 'Direct', value: 160 },\n  ],\n}\n","ts","",[321,337,338,374,381,403,423,434,440,457,474,484,517,544,552,558,586,594],{"__ignoreMap":335},[339,340,343,347,350,354,358,361,364,367,371],"span",{"class":341,"line":342},"line",1,[339,344,346],{"class":345},"s7zQu","import",[339,348,349],{"class":345}," type",[339,351,353],{"class":352},"sMK4o"," {",[339,355,357],{"class":356},"sTEyZ"," SunburstData",[339,359,360],{"class":352}," }",[339,362,363],{"class":345}," from",[339,365,366],{"class":352}," '",[339,368,370],{"class":369},"sfazB","vccs",[339,372,373],{"class":352},"'\n",[339,375,377],{"class":341,"line":376},2,[339,378,380],{"emptyLinePlaceholder":379},true,"\n",[339,382,384,388,391,394,397,400],{"class":341,"line":383},3,[339,385,387],{"class":386},"spNyl","const",[339,389,390],{"class":356}," data",[339,392,393],{"class":352},":",[339,395,357],{"class":396},"sBMFI",[339,398,399],{"class":352}," =",[339,401,402],{"class":352}," {\n",[339,404,406,410,412,414,417,420],{"class":341,"line":405},4,[339,407,409],{"class":408},"swJcz","  name",[339,411,393],{"class":352},[339,413,366],{"class":352},[339,415,416],{"class":369},"Traffic",[339,418,419],{"class":352},"'",[339,421,422],{"class":352},",\n",[339,424,426,429,431],{"class":341,"line":425},5,[339,427,428],{"class":408},"  children",[339,430,393],{"class":352},[339,432,433],{"class":356}," [\n",[339,435,437],{"class":341,"line":436},6,[339,438,439],{"class":352},"    {\n",[339,441,443,446,448,450,453,455],{"class":341,"line":442},7,[339,444,445],{"class":408},"      name",[339,447,393],{"class":352},[339,449,366],{"class":352},[339,451,452],{"class":369},"Search",[339,454,419],{"class":352},[339,456,422],{"class":352},[339,458,460,463,465,467,470,472],{"class":341,"line":459},8,[339,461,462],{"class":408},"      fill",[339,464,393],{"class":352},[339,466,366],{"class":352},[339,468,469],{"class":369},"#f97316",[339,471,419],{"class":352},[339,473,422],{"class":352},[339,475,477,480,482],{"class":341,"line":476},9,[339,478,479],{"class":408},"      children",[339,481,393],{"class":352},[339,483,433],{"class":356},[339,485,487,490,493,495,497,500,502,505,508,510,514],{"class":341,"line":486},10,[339,488,489],{"class":352},"        {",[339,491,492],{"class":408}," name",[339,494,393],{"class":352},[339,496,366],{"class":352},[339,498,499],{"class":369},"Google",[339,501,419],{"class":352},[339,503,504],{"class":352},",",[339,506,507],{"class":408}," value",[339,509,393],{"class":352},[339,511,513],{"class":512},"sbssI"," 420",[339,515,516],{"class":352}," },\n",[339,518,520,522,524,526,528,531,533,535,537,539,542],{"class":341,"line":519},11,[339,521,489],{"class":352},[339,523,492],{"class":408},[339,525,393],{"class":352},[339,527,366],{"class":352},[339,529,530],{"class":369},"Bing",[339,532,419],{"class":352},[339,534,504],{"class":352},[339,536,507],{"class":408},[339,538,393],{"class":352},[339,540,541],{"class":512}," 90",[339,543,516],{"class":352},[339,545,547,550],{"class":341,"line":546},12,[339,548,549],{"class":356},"      ]",[339,551,422],{"class":352},[339,553,555],{"class":341,"line":554},13,[339,556,557],{"class":352},"    },\n",[339,559,561,564,566,568,570,573,575,577,579,581,584],{"class":341,"line":560},14,[339,562,563],{"class":352},"    {",[339,565,492],{"class":408},[339,567,393],{"class":352},[339,569,366],{"class":352},[339,571,572],{"class":369},"Direct",[339,574,419],{"class":352},[339,576,504],{"class":352},[339,578,507],{"class":408},[339,580,393],{"class":352},[339,582,583],{"class":512}," 160",[339,585,516],{"class":352},[339,587,589,592],{"class":341,"line":588},15,[339,590,591],{"class":356},"  ]",[339,593,422],{"class":352},[339,595,597],{"class":341,"line":596},16,[339,598,599],{"class":352},"}\n",[601,602,603,619,635],"ul",{},[604,605,606,607,610,611,614,615,618],"li",{},"Leaves need a numeric ",[321,608,609],{},"value"," (or the field named by ",[321,612,613],{},"data-key","). Numeric strings such as ",[321,616,617],{},"\"12\""," count as numbers. A parent's value is the sum of its children.",[604,620,621,624,625,627,628,630,631,634],{},[321,622,623],{},"fill"," on a node colors that node. Without it, a node takes the ",[321,626,623],{}," prop, then its top-level group's ",[321,629,623],{},", then the series color of its group (",[321,632,633],{},"--v-charts-series-1"," and up).",[604,636,637,638,302],{},"The chart renders nothing when the root has no ",[321,639,327],{},[304,641,643],{"id":642},"props","Props",[645,646,647,666],"table",{},[648,649,650],"thead",{},[651,652,653,657,660,663],"tr",{},[654,655,656],"th",{},"Prop",[654,658,659],{},"Type",[654,661,662],{},"Default",[654,664,665],{},"Description",[667,668,669,692,711,730,750,767,788,807,826,845,863,882,901,920,937,962,979,999],"tbody",{},[651,670,671,676,681,687],{},[672,673,674],"td",{},[321,675,323],{},[672,677,678],{},[321,679,680],{},"SunburstData",[672,682,683],{},[684,685,686],"strong",{},"required",[672,688,689,690],{},"Root node with nested ",[321,691,327],{},[651,693,694,698,703,708],{},[672,695,696],{},[321,697,613],{},[672,699,700],{},[321,701,702],{},"string | number | (node) => unknown",[672,704,705],{},[321,706,707],{},"'value'",[672,709,710],{},"Field with the numeric value",[651,712,713,718,722,727],{},[672,714,715],{},[321,716,717],{},"name-key",[672,719,720],{},[321,721,702],{},[672,723,724],{},[321,725,726],{},"'name'",[672,728,729],{},"Field with the node name",[651,731,732,737,742,747],{},[672,733,734],{},[321,735,736],{},"inner-radius",[672,738,739],{},[321,740,741],{},"number",[672,743,744],{},[321,745,746],{},"50",[672,748,749],{},"Radius of the hole in the center, in px",[651,751,752,757,761,764],{},[672,753,754],{},[321,755,756],{},"outer-radius",[672,758,759],{},[321,760,741],{},[672,762,763],{},"half the smaller side",[672,765,766],{},"Radius of the outer ring, in px",[651,768,769,778,782,785],{},[672,770,771,774,775],{},[321,772,773],{},"cx"," \u002F ",[321,776,777],{},"cy",[672,779,780],{},[321,781,741],{},[672,783,784],{},"center",[672,786,787],{},"Center of the rings, in px",[651,789,790,795,799,804],{},[672,791,792],{},[321,793,794],{},"start-angle",[672,796,797],{},[321,798,741],{},[672,800,801],{},[321,802,803],{},"0",[672,805,806],{},"Angle where the first sector starts, in degrees",[651,808,809,814,818,823],{},[672,810,811],{},[321,812,813],{},"end-angle",[672,815,816],{},[321,817,741],{},[672,819,820],{},[321,821,822],{},"360",[672,824,825],{},"Angle where the last sector ends, in degrees",[651,827,828,833,837,842],{},[672,829,830],{},[321,831,832],{},"ring-padding",[672,834,835],{},[321,836,741],{},[672,838,839],{},[321,840,841],{},"2",[672,843,844],{},"Space between rings, in px",[651,846,847,852,856,860],{},[672,848,849],{},[321,850,851],{},"padding",[672,853,854],{},[321,855,741],{},[672,857,858],{},[321,859,841],{},[672,861,862],{},"Angle between sectors, in degrees. At most half the angle of a sector",[651,864,865,869,874,877],{},[672,866,867],{},[321,868,623],{},[672,870,871],{},[321,872,873],{},"string",[672,875,876],{},"per group",[672,878,879,880],{},"Fill for nodes without their own ",[321,881,623],{},[651,883,884,889,893,898],{},[672,885,886],{},[321,887,888],{},"stroke",[672,890,891],{},[321,892,873],{},[672,894,895],{},[321,896,897],{},"var(--v-charts-background, #fff)",[672,899,900],{},"Sector border color",[651,902,903,908,912,917],{},[672,904,905],{},[321,906,907],{},"title",[672,909,910],{},[321,911,873],{},[672,913,914],{},[321,915,916],{},"'Sunburst chart'",[672,918,919],{},"Accessible name",[651,921,922,927,931,934],{},[672,923,924],{},[321,925,926],{},"desc",[672,928,929],{},[321,930,873],{},[672,932,933],{},"—",[672,935,936],{},"Accessible description",[651,938,939,950,954,957],{},[672,940,941,774,944,774,947],{},[321,942,943],{},"width",[321,945,946],{},"height",[321,948,949],{},"aspect",[672,951,952],{},[321,953,741],{},[672,955,956],{},"full width",[672,958,959,960],{},"Size. See ",[297,961,48],{"href":49},[651,963,964,969,974,976],{},[672,965,966],{},[321,967,968],{},"initial-dimension",[672,970,971],{},[321,972,973],{},"{ width, height }",[672,975,933],{},[672,977,978],{},"Size before the first measurement",[651,980,981,986,991,996],{},[672,982,983],{},[321,984,985],{},"is-animation-active",[672,987,988],{},[321,989,990],{},"boolean",[672,992,993],{},[321,994,995],{},"true",[672,997,998],{},"Animate entry and data changes",[651,1000,1001,1006,1011,1014],{},[672,1002,1003],{},[321,1004,1005],{},"transition",[672,1007,1008],{},[321,1009,1010],{},"ChartTransition",[672,1012,1013],{},"motion tokens",[672,1015,1016,1017],{},"Timing of data changes. See ",[297,1018,83],{"href":84},[290,1020,1021],{},"When the data changes, sectors match by their name path from the inner ring outwards. A new sector grows out of its neighbor; a removed one folds into it.",[304,1023,1025],{"id":1024},"events","Events",[645,1027,1028,1040],{},[648,1029,1030],{},[651,1031,1032,1035,1038],{},[654,1033,1034],{},"Event",[654,1036,1037],{},"Payload",[654,1039,665],{},[667,1041,1042,1061,1076,1090],{},[651,1043,1044,1049,1054],{},[672,1045,1046],{},[321,1047,1048],{},"@node-click",[672,1050,1051],{},[321,1052,1053],{},"(node, index, event: MouseEvent | KeyboardEvent)",[672,1055,1056,1057,1060],{},"Click on a sector, or ",[321,1058,1059],{},"Enter"," on the active sector",[651,1062,1063,1068,1073],{},[672,1064,1065],{},[321,1066,1067],{},"@node-mouseenter",[672,1069,1070],{},[321,1071,1072],{},"(node, index, event: MouseEvent)",[672,1074,1075],{},"Pointer enters a sector; the tooltip shows it",[651,1077,1078,1083,1087],{},[672,1079,1080],{},[321,1081,1082],{},"@node-mouseleave",[672,1084,1085],{},[321,1086,1072],{},[672,1088,1089],{},"Pointer leaves a sector",[651,1091,1092,1100,1102],{},[672,1093,1094,774,1097],{},[321,1095,1096],{},"@animation-start",[321,1098,1099],{},"@animation-end",[672,1101,933],{},[672,1103,1104],{},"A data change animation starts or ends",[290,1106,1107,1110,1111,1114,1115,1118,1119,1122,1123,1126,1127,1130,1131,1134,1135,302],{},[321,1108,1109],{},"node"," is a ",[321,1112,1113],{},"SunburstLayoutNode",": ",[321,1116,1117],{},"{ name, value, depth, payload, path, cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill? }",". ",[321,1120,1121],{},"payload"," is your data object. ",[321,1124,1125],{},"index"," is the position of the sector in the layout. The chart also emits the pointer events of every chart, such as ",[321,1128,1129],{},"@click"," and ",[321,1132,1133],{},"@mousemove","; see ",[297,1136,88],{"href":89},[304,1138,1140],{"id":1139},"slots","Slots",[645,1142,1143,1154],{},[648,1144,1145],{},[651,1146,1147,1150,1152],{},[654,1148,1149],{},"Slot",[654,1151,643],{},[654,1153,665],{},[667,1155,1156,1173],{},[651,1157,1158,1163,1168],{},[672,1159,1160],{},[321,1161,1162],{},"#content",[672,1164,1165],{},[321,1166,1167],{},"SunburstContentSlotProps",[672,1169,1170,1171],{},"Replaces each sector. Receives the layout node plus ",[321,1172,1125],{},[651,1174,1175,1178,1180],{},[672,1176,1177],{},"default",[672,1179,933],{},[672,1181,1182,1183,1186],{},"Place ",[321,1184,1185],{},"\u003CTooltip>"," here",[290,1188,1189,1190,1196],{},"Draw your own sectors with the ",[297,1191,1193],{"href":1192},"\u002Fcomponents\u002Fshapes#sector",[321,1194,1195],{},"Sector"," shape:",[330,1198,1202],{"className":1199,"code":1200,"language":1201,"meta":335,"style":335},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CSunburstChart :data=\"data\" :height=\"320\">\n  \u003Ctemplate #content=\"{ cx, cy, innerRadius, outerRadius, startAngle, endAngle, depth }\">\n    \u003CSector\n      :cx=\"cx\"\n      :cy=\"cy\"\n      :inner-radius=\"innerRadius\"\n      :outer-radius=\"outerRadius\"\n      :start-angle=\"startAngle\"\n      :end-angle=\"endAngle\"\n      :fill=\"depth === 1 ? '#f97316' : '#14b8a6'\"\n      stroke=\"#fff\"\n    \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FSunburstChart>\n","vue",[321,1203,1204,1243,1248,1253,1258,1263,1268,1273,1278,1283,1288,1293,1298,1303],{"__ignoreMap":335},[339,1205,1206,1209,1212,1215,1217,1220,1223,1225,1227,1229,1231,1233,1235,1238,1240],{"class":341,"line":342},[339,1207,1208],{"class":352},"\u003C",[339,1210,1211],{"class":408},"SunburstChart",[339,1213,1214],{"class":352}," :",[339,1216,323],{"class":386},[339,1218,1219],{"class":352},"=",[339,1221,1222],{"class":352},"\"",[339,1224,323],{"class":356},[339,1226,1222],{"class":352},[339,1228,1214],{"class":352},[339,1230,946],{"class":386},[339,1232,1219],{"class":352},[339,1234,1222],{"class":352},[339,1236,1237],{"class":512},"320",[339,1239,1222],{"class":352},[339,1241,1242],{"class":352},">\n",[339,1244,1245],{"class":341,"line":376},[339,1246,1247],{"class":356},"  \u003Ctemplate #content=\"{ cx, cy, innerRadius, outerRadius, startAngle, endAngle, depth }\">\n",[339,1249,1250],{"class":341,"line":383},[339,1251,1252],{"class":356},"    \u003CSector\n",[339,1254,1255],{"class":341,"line":405},[339,1256,1257],{"class":356},"      :cx=\"cx\"\n",[339,1259,1260],{"class":341,"line":425},[339,1261,1262],{"class":356},"      :cy=\"cy\"\n",[339,1264,1265],{"class":341,"line":436},[339,1266,1267],{"class":356},"      :inner-radius=\"innerRadius\"\n",[339,1269,1270],{"class":341,"line":442},[339,1271,1272],{"class":356},"      :outer-radius=\"outerRadius\"\n",[339,1274,1275],{"class":341,"line":459},[339,1276,1277],{"class":356},"      :start-angle=\"startAngle\"\n",[339,1279,1280],{"class":341,"line":476},[339,1281,1282],{"class":356},"      :end-angle=\"endAngle\"\n",[339,1284,1285],{"class":341,"line":486},[339,1286,1287],{"class":356},"      :fill=\"depth === 1 ? '#f97316' : '#14b8a6'\"\n",[339,1289,1290],{"class":341,"line":519},[339,1291,1292],{"class":356},"      stroke=\"#fff\"\n",[339,1294,1295],{"class":341,"line":546},[339,1296,1297],{"class":356},"    \u002F>\n",[339,1299,1300],{"class":341,"line":554},[339,1301,1302],{"class":356},"  \u003C\u002Ftemplate>\n",[339,1304,1305,1308,1310],{"class":341,"line":560},[339,1306,1307],{"class":352},"\u003C\u002F",[339,1309,1211],{"class":408},[339,1311,1242],{"class":352},[304,1313,1315],{"id":1314},"keyboard","Keyboard",[290,1317,1318,1319,1322,1323,1325],{},"The chart is one focusable element (",[321,1320,1321],{},"role=\"application\"",", named by ",[321,1324,907],{},"). With focus:",[601,1327,1328,1345,1354,1363],{},[604,1329,1330,1333,1334,1337,1338,1333,1341,1344],{},[321,1331,1332],{},"ArrowRight"," or ",[321,1335,1336],{},"ArrowDown"," moves to the next sector, ",[321,1339,1340],{},"ArrowLeft",[321,1342,1343],{},"ArrowUp"," to the previous one. The order is depth first: a group, then its children, then the next group.",[604,1346,1347,1130,1350,1353],{},[321,1348,1349],{},"Home",[321,1351,1352],{},"End"," jump to the first and last sector.",[604,1355,1356,1358,1359,1362],{},[321,1357,1059],{}," emits ",[321,1360,1361],{},"node-click"," for the active sector.",[604,1364,1365,1368],{},[321,1366,1367],{},"Escape"," clears the selection.",[290,1370,1371,1372,302],{},"The tooltip follows the active sector, and a live region reads its text. See ",[297,1373,113],{"href":114},[304,1375,1377],{"id":1376},"related","Related",[601,1379,1380,1385,1390],{},[604,1381,1382,1384],{},[297,1383,173],{"href":174},": the same data as nested rectangles",[604,1386,1387,1389],{},[297,1388,144],{"href":145},": one level of parts",[604,1391,1392,1394],{},[297,1393,223],{"href":224},": customize the tooltip content",[1396,1397,1398],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":335,"searchDepth":376,"depth":376,"links":1400},[1401,1402,1403,1404,1405,1406,1407],{"id":306,"depth":376,"text":307},{"id":316,"depth":376,"text":317},{"id":642,"depth":376,"text":643},{"id":1024,"depth":376,"text":1025},{"id":1139,"depth":376,"text":1140},{"id":1314,"depth":376,"text":1315},{"id":1376,"depth":376,"text":1377},"Show hierarchical data as rings of sectors","md",null,{},{"icon":181},{"title":178,"description":1408},"GmkpVuMG0aQGcTbRBKJSLWX-WNhOFf30NVbNXN85UkA",[1416,1418],{"title":173,"path":174,"stem":175,"description":1417,"icon":176,"children":-1},"Visualize hierarchical data as nested rectangles",{"title":183,"path":184,"stem":185,"description":1419,"icon":186,"children":-1},"Flow diagrams showing the magnitude of flow between nodes",1793527168966]