[{"data":1,"prerenderedAt":1151},["ShallowReactive",2],{"navigation_docs":3,"-guides-accessibility":279,"-guides-accessibility-surround":1146},[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":108,"body":281,"description":1139,"extension":1140,"links":1141,"meta":1142,"navigation":1143,"path":109,"seo":1144,"stem":110,"__hash__":1145},"docs\u002F2.guides\u002F18.accessibility.md",{"type":282,"value":283,"toc":1126},"minimark",[284,288,293,305,421,434,465,469,507,549,567,571,578,732,743,748,795,799,810,819,823,838,878,885,889,902,906,923,930,1063,1070,1074,1098,1102,1122],[285,286,287],"p",{},"Every vccs chart has an accessible name, and every interactive chart works with the keyboard. This page lists what the charts do for you and what you still need to set.",[289,290,292],"h2",{"id":291},"give-each-chart-a-name","Give each chart a name",[285,294,295,296,300,301,304],{},"Every chart takes ",[297,298,299],"code",{},"title"," (the accessible name) and ",[297,302,303],{},"desc"," (a longer description):",[306,307,312],"pre",{"className":308,"code":309,"language":310,"meta":311,"style":311},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBarChart\n  :data=\"data\"\n  :height=\"300\"\n  title=\"Monthly visitors\"\n  desc=\"Desktop and mobile visitors from January to June. Desktop peaks in February.\"\n>\n  …\n\u003C\u002FBarChart>\n","vue","",[297,313,314,327,349,367,383,398,404,410],{"__ignoreMap":311},[315,316,319,323],"span",{"class":317,"line":318},"line",1,[315,320,322],{"class":321},"sMK4o","\u003C",[315,324,326],{"class":325},"swJcz","BarChart\n",[315,328,330,333,337,340,343,346],{"class":317,"line":329},2,[315,331,332],{"class":321},"  :",[315,334,336],{"class":335},"spNyl","data",[315,338,339],{"class":321},"=",[315,341,342],{"class":321},"\"",[315,344,336],{"class":345},"sTEyZ",[315,347,348],{"class":321},"\"\n",[315,350,352,354,357,359,361,365],{"class":317,"line":351},3,[315,353,332],{"class":321},[315,355,356],{"class":335},"height",[315,358,339],{"class":321},[315,360,342],{"class":321},[315,362,364],{"class":363},"sbssI","300",[315,366,348],{"class":321},[315,368,370,373,375,377,381],{"class":317,"line":369},4,[315,371,372],{"class":335},"  title",[315,374,339],{"class":321},[315,376,342],{"class":321},[315,378,380],{"class":379},"sfazB","Monthly visitors",[315,382,348],{"class":321},[315,384,386,389,391,393,396],{"class":317,"line":385},5,[315,387,388],{"class":335},"  desc",[315,390,339],{"class":321},[315,392,342],{"class":321},[315,394,395],{"class":379},"Desktop and mobile visitors from January to June. Desktop peaks in February.",[315,397,348],{"class":321},[315,399,401],{"class":317,"line":400},6,[315,402,403],{"class":321},">\n",[315,405,407],{"class":317,"line":406},7,[315,408,409],{"class":345},"  …\n",[315,411,413,416,419],{"class":317,"line":412},8,[315,414,415],{"class":321},"\u003C\u002F",[315,417,418],{"class":325},"BarChart",[315,420,403],{"class":321},[285,422,423,424,426,427,430,431,433],{},"Without ",[297,425,299],{},", the chart uses a generic name such as \"Bar chart\", \"Radial bar chart\", \"Treemap\", \"Status history\" or \"Activity calendar\"; a ",[297,428,429],{},"ComposedChart"," is called \"Chart\". A generic name does not say what the data is, so set ",[297,432,299],{}," on every chart that people must understand.",[435,436,437,447,456],"ul",{},[438,439,440,442,443,446],"li",{},[297,441,299],{}," becomes the ",[297,444,445],{},"aria-label"," of the focusable chart element.",[438,448,449,451,452,455],{},[297,450,303],{}," is linked with ",[297,453,454],{},"aria-describedby",". Use it for the main finding of the chart, or a short text version of the data.",[438,457,458,460,461,464],{},[297,459,198],{}," builds its name from the data (\"Trend: 12 values from 3 to 9\") and reads the active point. ",[297,462,463],{},"JourneySankey"," names itself by its sessions and steps.",[289,466,468],{"id":467},"the-accessibility-layer","The accessibility layer",[285,470,471,472,474,475,474,478,474,481,474,483,474,486,474,489,474,492,474,495,498,499,502,503,506],{},"Cartesian and polar charts (",[297,473,418],{},", ",[297,476,477],{},"LineChart",[297,479,480],{},"AreaChart",[297,482,429],{},[297,484,485],{},"ScatterChart",[297,487,488],{},"PieChart",[297,490,491],{},"RadarChart",[297,493,494],{},"RadialBarChart",[297,496,497],{},"FunnelChart",") have an accessibility layer that is on by default (",[297,500,501],{},"accessibility-layer"," is ",[297,504,505],{},"true","). With it, the chart wrapper:",[435,508,509,520,531,546],{},[438,510,511,512,515,516,519],{},"is in the tab order (",[297,513,514],{},"tabindex=\"0\"","; change it with ",[297,517,518],{},"tab-index","),",[438,521,522,523,526,527,530],{},"has ",[297,524,525],{},"role=\"application\""," (change it with ",[297,528,529],{},"role","), so screen readers pass the arrow keys to the chart,",[438,532,533,534,536,537,539,540,542,543,545],{},"has the ",[297,535,299],{}," as ",[297,538,445],{}," and ",[297,541,303],{}," through ",[297,544,454],{},",",[438,547,548],{},"moves the tooltip with the keyboard and announces it (see below).",[285,550,551,552,555,556,559,560,563,564,566],{},"Set ",[297,553,554],{},":accessibility-layer=\"false\""," for a chart that is only decoration, or when you build your own keyboard model. The chart is then not focusable, and the ",[297,557,558],{},"\u003Csvg>"," gets ",[297,561,562],{},"role=\"img\""," with the ",[297,565,299],{}," as its name.",[289,568,570],{"id":569},"keyboard","Keyboard",[285,572,573,574,577],{},"Focus the chart with ",[297,575,576],{},"Tab",". The keys depend on the chart type.",[579,580,581,593],"table",{},[582,583,584],"thead",{},[585,586,587,590],"tr",{},[588,589,113],"th",{},[588,591,592],{},"Keys",[594,595,596,616,647,662,687,706,724],"tbody",{},[585,597,598,602],{},[599,600,601],"td",{},"Axis charts: Bar, Line, Area, Composed, Radar, RadialBar",[599,603,604,605,539,608,611,612,615],{},"Focus shows the first category. ",[297,606,607],{},"ArrowRight",[297,609,610],{},"ArrowLeft"," move one category; on a reversed X axis the direction follows the axis. ",[297,613,614],{},"Enter"," hides or shows the tooltip",[585,617,618,621],{},[599,619,620],{},"Item charts: Pie, Scatter, Funnel",[599,622,623,625,626,629,630,625,632,635,636,539,639,642,643,646],{},[297,624,607],{}," or ",[297,627,628],{},"ArrowDown"," moves to the next item, ",[297,631,610],{},[297,633,634],{},"ArrowUp"," to the previous one. ",[297,637,638],{},"Home",[297,640,641],{},"End"," jump to the first and last item. ",[297,644,645],{},"Escape"," clears the selection. The order is series by series, then data order",[585,648,649,652],{},[599,650,651],{},"Treemap, Sankey, SunburstChart",[599,653,654,655,657,658,661],{},"The same keys as item charts. ",[297,656,614],{}," emits ",[297,659,660],{},"node-click"," for the active node",[585,663,664,667],{},[599,665,666],{},"Tracker, Heatmap, CohortChart, CalendarHeatmap",[599,668,669,670,673,674,539,676,678,679,657,681,474,684,686],{},"The cells form one list (",[297,671,672],{},"role=\"listbox\"","). Focus starts on the latest cell. Arrow keys move within the grid and skip empty places, ",[297,675,638],{},[297,677,641],{}," jump to the first and last cell, ",[297,680,614],{},[297,682,683],{},"cell-click",[297,685,645],{}," clears",[585,688,689,691],{},[599,690,198],{},[599,692,693,694,539,696,698,699,539,701,703,704,686],{},"Focus starts on the latest point. ",[297,695,610],{},[297,697,607],{}," move one point, ",[297,700,638],{},[297,702,641],{}," jump to the first and last point, ",[297,705,645],{},[585,707,708,710],{},[599,709,463],{},[599,711,712,713,625,715,718,719,474,721,723],{},"Arrow keys move within a step (up and down) and along the largest band (left and right). ",[297,714,614],{},[297,716,717],{},"Space"," pins the journey through the focused node and emits ",[297,720,660],{},[297,722,645],{}," clears it",[585,725,726,729],{},[599,727,728],{},"BarList",[599,730,731],{},"A normal HTML list. Rows with a link or an action are native links or buttons",[285,733,734,735,738,739,742],{},"The keyboard drives the same selection as the pointer: the tooltip shows the item, the item is drawn in its active state, and ",[297,736,737],{},"v-model:active-index"," receives the update. See ",[740,741,83],"a",{"href":84},".",[744,745,747],"h3",{"id":746},"brush-and-legend","Brush and Legend",[435,749,750,769],{},[438,751,752,753,755,756,759,760,539,762,764,765,768],{},"Each ",[740,754,241],{"href":242}," handle is a slider (",[297,757,758],{},"role=\"slider\"",") in the tab order, named \"Range start\" and \"Range end\". ",[297,761,610],{},[297,763,607],{}," move it by one row. ",[297,766,767],{},"aria-valuetext"," reads the category.",[438,770,752,771,773,774,777,778,782,783,786,787,539,789,791,792,742],{},[740,772,223],{"href":224}," entry is a native ",[297,775,776],{},"\u003Cbutton>"," named \"Toggle ",[779,780,781],"em",{},"name"," series\", with ",[297,784,785],{},"aria-pressed"," set while the series is shown. ",[297,788,614],{},[297,790,717],{}," work like a click, including ",[297,793,794],{},"v-model:hidden",[289,796,798],{"id":797},"announcements","Announcements",[285,800,801,802,805,806,809],{},"A chart with a ",[297,803,804],{},"\u003CTooltip>"," has a polite live region. When the keyboard moves the selection, it reads the tooltip text, for example \"Feb: Desktop 305, Mobile 200\". It uses the same ",[297,807,808],{},"formatter"," as the tooltip. Pointer movement is never announced, so hovering does not flood a screen reader.",[285,811,812,813,815,816,818],{},"Put a ",[297,814,804],{}," in every chart that people use with the keyboard; without it, nothing is announced. Under a controlled ",[297,817,737],{},", the chart announces only after you accept the keyboard's request.",[289,820,822],{"id":821},"focus-styling","Focus styling",[285,824,825,826,829,830,833,834,837],{},"Keyboard focus draws a 2 px outline with a 2 px offset in ",[297,827,828],{},"--v-charts-focus"," (default: the system ",[297,831,832],{},"Highlight"," color). Pointer clicks do not show the outline. While the outline shows, the wrapper has a ",[297,835,836],{},"data-focus-visible"," attribute.",[306,839,843],{"className":840,"code":841,"language":842,"meta":311,"style":311},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".dashboard {\n  --v-charts-focus: #f97316;\n}\n","css",[297,844,845,856,873],{"__ignoreMap":311},[315,846,847,849,853],{"class":317,"line":318},[315,848,742],{"class":321},[315,850,852],{"class":851},"sBMFI","dashboard",[315,854,855],{"class":321}," {\n",[315,857,858,861,864,867,870],{"class":317,"line":329},[315,859,860],{"class":345},"  --v-charts-focus",[315,862,863],{"class":321},":",[315,865,866],{"class":321}," #",[315,868,869],{"class":345},"f97316",[315,871,872],{"class":321},";\n",[315,874,875],{"class":317,"line":351},[315,876,877],{"class":321},"}\n",[285,879,880,881,884],{},"Check that the focus color has a contrast of at least 3:1 against the page background. See ",[740,882,883],{"href":94},"Theming"," for all tokens.",[289,886,888],{"id":887},"reduced-motion","Reduced motion",[285,890,891,892,895,896,899,900,742],{},"Charts follow the operating system's ",[779,893,894],{},"reduce motion"," setting: data changes snap to their final state, and the tooltip stops gliding. You do not have to do anything. To stop motion for everybody, set ",[297,897,898],{},":is-animation-active=\"false\""," on the chart. See ",[740,901,78],{"href":79},[289,903,905],{"id":904},"style-parts-without-colors-only","Style parts without colors only",[285,907,908,909,474,911,914,915,918,919,742],{},"Do not use color as the only way to tell series apart. Add a ",[740,910,223],{"href":224},[740,912,913],{"href":256},"labels",", different ",[297,916,917],{},"stroke-dasharray"," values or different ",[740,920,922],{"href":921},"\u002Fcomponents\u002Fshapes#symbols","symbols",[285,924,925,926,929],{},"To style chart parts, use the ",[297,927,928],{},"data-slot"," attributes instead of generated class names or ids:",[579,931,932,943],{},[582,933,934],{},[585,935,936,940],{},[588,937,938],{},[297,939,928],{},[588,941,942],{},"Part",[594,944,945,955,967,977,991,1004,1017,1027,1043,1053],{},[585,946,947,952],{},[599,948,949],{},[297,950,951],{},"chart",[599,953,954],{},"The chart wrapper (focusable element)",[585,956,957,962],{},[599,958,959],{},[297,960,961],{},"surface",[599,963,964,965],{},"The ",[297,966,558],{},[585,968,969,974],{},[599,970,971],{},[297,972,973],{},"plot",[599,975,976],{},"The plot area",[585,978,979,984],{},[599,980,981],{},[297,982,983],{},"grid",[599,985,986,539,988],{},[297,987,228],{},[297,989,990],{},"PolarGrid",[585,992,993,1001],{},[599,994,995,474,998],{},[297,996,997],{},"x-axis",[297,999,1000],{},"y-axis",[599,1002,1003],{},"Cartesian axes",[585,1005,1006,1014],{},[599,1007,1008,474,1011],{},[297,1009,1010],{},"angle-axis",[297,1012,1013],{},"radius-axis",[599,1015,1016],{},"Polar axes",[585,1018,1019,1024],{},[599,1020,1021],{},[297,1022,1023],{},"series",[599,1025,1026],{},"Each series layer",[585,1028,1029,1040],{},[599,1030,1031,474,1034,474,1037],{},[297,1032,1033],{},"tooltip",[297,1035,1036],{},"legend",[297,1038,1039],{},"brush",[599,1041,1042],{},"Those components",[585,1044,1045,1050],{},[599,1046,1047],{},[297,1048,1049],{},"cell",[599,1051,1052],{},"A cell of a cell chart",[585,1054,1055,1060],{},[599,1056,1057],{},[297,1058,1059],{},"label",[599,1061,1062],{},"A Label",[285,1064,1065,1066,1069],{},"Native ",[297,1067,1068],{},"aria-*"," attributes that you put on a chart or a series are passed on to the element.",[289,1071,1073],{"id":1072},"checklist","Checklist",[435,1075,1076,1084,1089,1092,1095],{},[438,1077,551,1078,1080,1081,1083],{},[297,1079,299],{}," on every chart, and ",[297,1082,303],{}," when the finding is not obvious.",[438,1085,812,1086,1088],{},[297,1087,804],{}," in every interactive chart.",[438,1090,1091],{},"Keep the accessibility layer on, unless the chart is decoration.",[438,1093,1094],{},"Give the focus color enough contrast.",[438,1096,1097],{},"Do not rely on color alone.",[289,1099,1101],{"id":1100},"related","Related",[435,1103,1104,1109,1117],{},[438,1105,1106,1108],{},[740,1107,83],{"href":84},": selection, keyboard and control rules",[438,1110,1111,1113,1114,1116],{},[740,1112,883],{"href":94},": ",[297,1115,828],{}," and the other tokens",[438,1118,1119,1121],{},[740,1120,78],{"href":79},": reduced motion and timing",[1123,1124,1125],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":311,"searchDepth":329,"depth":329,"links":1127},[1128,1129,1130,1133,1134,1135,1136,1137,1138],{"id":291,"depth":329,"text":292},{"id":467,"depth":329,"text":468},{"id":569,"depth":329,"text":570,"children":1131},[1132],{"id":746,"depth":351,"text":747},{"id":797,"depth":329,"text":798},{"id":821,"depth":329,"text":822},{"id":887,"depth":329,"text":888},{"id":904,"depth":329,"text":905},{"id":1072,"depth":329,"text":1073},{"id":1100,"depth":329,"text":1101},"Accessible names, keyboard support, focus, announcements and reduced motion","md",null,{},{"icon":111},{"title":108,"description":1139},"lArbwlp4gAJDPSn1df1MsTt_HoT3Rhn0WWgaC93Ewlg",[1147,1149],{"title":103,"path":104,"stem":105,"description":1148,"icon":106,"children":-1},"Donut with a center value, gauge and conversion funnel from the existing charts",{"title":119,"path":120,"stem":121,"description":1150,"icon":122,"children":-1},"Props shared by AreaChart, BarChart, LineChart, ComposedChart, ScatterChart, PieChart, RadarChart, RadialBarChart and FunnelChart",1791811112416]