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