[{"data":1,"prerenderedAt":1382},["ShallowReactive",2],{"navigation_docs":3,"-guides-axis-domain-and-ticks":284,"-guides-axis-domain-and-ticks-surround":1377},[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":43,"body":286,"description":1370,"extension":1371,"links":1372,"meta":1373,"navigation":1374,"path":44,"seo":1375,"stem":45,"__hash__":1376},"docs\u002F2.guides\u002F03.axis-domain-and-ticks.md",{"type":287,"value":288,"toc":1356},"minimark",[289,302,305,310,313,319,323,331,336,340,347,352,356,359,364,368,629,633,640,645,649,654,659,663,670,675,807,811,820,825,970,974,981,999,1004,1078,1091,1155,1163,1167,1174,1200,1204,1207,1352],[290,291,292,293,297,298,301],"p",{},"The ",[294,295,296],"strong",{},"domain"," defines the min\u002Fmax range of an axis. ",[294,299,300],{},"Ticks"," are the labeled markers along the axis.",[290,303,304],{},"The examples below use solar system data — planet masses span from 10²² kg (Pluto) to 10³⁰ kg (Sun), making domain configuration essential.",[306,307,309],"h2",{"id":308},"default-domain","Default domain",[290,311,312],{},"By default, axes calculate their domain from the data. When values span many orders of magnitude, the result is unsatisfactory — smaller planets are invisible because the Sun dominates:",[314,315],"chart-demo",{"description":316,"name":317,"src":318},"Sun dominates the Y axis — all other planets are barely visible.","Default Domain","guide-charts\u002Fdomain-default-chart",[306,320,322],{"id":321},"yaxis-as-category-type","YAxis as category type",[290,324,325,326,330],{},"Switching YAxis to ",[327,328,329],"code",{},"type=\"category\""," shows each unique mass value as a discrete tick:",[314,332],{"description":333,"name":334,"src":335},"YAxis type='category' shows each mass as a distinct tick.","Categorical Y Axis","guide-charts\u002Fdomain-category-axis-chart",[306,337,339],{"id":338},"custom-domain-with-allow-data-overflow","Custom domain with allow-data-overflow",[290,341,342,343,346],{},"Set a fixed domain to zoom into a range. Add ",[327,344,345],{},"allow-data-overflow"," so the axis keeps that domain; without it, the axis grows to include all data. Data outside the domain is clipped:",[314,348],{"description":349,"name":350,"src":351},"Domain [1e23, 2e27] makes gas giants and rocky planets visible.","Custom Domain","guide-charts\u002Fdomain-custom-chart",[306,353,355],{"id":354},"logarithmic-scale","Logarithmic scale",[290,357,358],{},"For data spanning many orders of magnitude, a logarithmic scale makes all values proportionally visible:",[314,360],{"description":361,"name":362,"src":363},"Log scale reveals all planets across 8 orders of magnitude.","Logarithmic Scale","guide-charts\u002Fdomain-log-scale-chart",[306,365,367],{"id":366},"domain-options","Domain options",[369,370,375],"pre",{"className":371,"code":372,"language":373,"meta":374,"style":374},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Auto domain from data (default) -->\n\u003CYAxis \u002F>\n\n\u003C!-- Fixed domain -->\n\u003CYAxis :domain=\"[0, 100]\" \u002F>\n\n\u003C!-- Data-driven bounds -->\n\u003CYAxis :domain=\"['dataMin', 'dataMax']\" \u002F>\n\n\u003C!-- Auto with padding -->\n\u003CYAxis :domain=\"['auto', 'auto']\" \u002F>\n\n\u003C!-- Custom function -->\n\u003CYAxis :domain=\"[(dataMin) => dataMin * 0.9, (dataMax) => dataMax * 1.1]\" \u002F>\n","vue","",[327,376,377,386,400,407,413,453,458,464,506,511,517,555,560,566],{"__ignoreMap":374},[378,379,382],"span",{"class":380,"line":381},"line",1,[378,383,385],{"class":384},"sHwdD","\u003C!-- Auto domain from data (default) -->\n",[378,387,389,393,397],{"class":380,"line":388},2,[378,390,392],{"class":391},"sMK4o","\u003C",[378,394,396],{"class":395},"swJcz","YAxis",[378,398,399],{"class":391}," \u002F>\n",[378,401,403],{"class":380,"line":402},3,[378,404,406],{"emptyLinePlaceholder":405},true,"\n",[378,408,410],{"class":380,"line":409},4,[378,411,412],{"class":384},"\u003C!-- Fixed domain -->\n",[378,414,416,418,420,423,426,429,432,436,440,443,446,449,451],{"class":380,"line":415},5,[378,417,392],{"class":391},[378,419,396],{"class":395},[378,421,422],{"class":391}," :",[378,424,296],{"class":425},"spNyl",[378,427,428],{"class":391},"=",[378,430,431],{"class":391},"\"",[378,433,435],{"class":434},"sTEyZ","[",[378,437,439],{"class":438},"sbssI","0",[378,441,442],{"class":391},",",[378,444,445],{"class":438}," 100",[378,447,448],{"class":434},"]",[378,450,431],{"class":391},[378,452,399],{"class":391},[378,454,456],{"class":380,"line":455},6,[378,457,406],{"emptyLinePlaceholder":405},[378,459,461],{"class":380,"line":460},7,[378,462,463],{"class":384},"\u003C!-- Data-driven bounds -->\n",[378,465,467,469,471,473,475,477,479,481,484,488,490,492,495,498,500,502,504],{"class":380,"line":466},8,[378,468,392],{"class":391},[378,470,396],{"class":395},[378,472,422],{"class":391},[378,474,296],{"class":425},[378,476,428],{"class":391},[378,478,431],{"class":391},[378,480,435],{"class":434},[378,482,483],{"class":391},"'",[378,485,487],{"class":486},"sfazB","dataMin",[378,489,483],{"class":391},[378,491,442],{"class":391},[378,493,494],{"class":391}," '",[378,496,497],{"class":486},"dataMax",[378,499,483],{"class":391},[378,501,448],{"class":434},[378,503,431],{"class":391},[378,505,399],{"class":391},[378,507,509],{"class":380,"line":508},9,[378,510,406],{"emptyLinePlaceholder":405},[378,512,514],{"class":380,"line":513},10,[378,515,516],{"class":384},"\u003C!-- Auto with padding -->\n",[378,518,520,522,524,526,528,530,532,534,536,539,541,543,545,547,549,551,553],{"class":380,"line":519},11,[378,521,392],{"class":391},[378,523,396],{"class":395},[378,525,422],{"class":391},[378,527,296],{"class":425},[378,529,428],{"class":391},[378,531,431],{"class":391},[378,533,435],{"class":434},[378,535,483],{"class":391},[378,537,538],{"class":486},"auto",[378,540,483],{"class":391},[378,542,442],{"class":391},[378,544,494],{"class":391},[378,546,538],{"class":486},[378,548,483],{"class":391},[378,550,448],{"class":434},[378,552,431],{"class":391},[378,554,399],{"class":391},[378,556,558],{"class":380,"line":557},12,[378,559,406],{"emptyLinePlaceholder":405},[378,561,563],{"class":380,"line":562},13,[378,564,565],{"class":384},"\u003C!-- Custom function -->\n",[378,567,569,571,573,575,577,579,581,583,586,589,592,595,598,601,604,606,609,611,613,615,618,620,623,625,627],{"class":380,"line":568},14,[378,570,392],{"class":391},[378,572,396],{"class":395},[378,574,422],{"class":391},[378,576,296],{"class":425},[378,578,428],{"class":391},[378,580,431],{"class":391},[378,582,435],{"class":434},[378,584,585],{"class":391},"(",[378,587,487],{"class":588},"sHdIc",[378,590,591],{"class":391},")",[378,593,594],{"class":425}," =>",[378,596,597],{"class":434}," dataMin ",[378,599,600],{"class":391},"*",[378,602,603],{"class":438}," 0.9",[378,605,442],{"class":391},[378,607,608],{"class":391}," (",[378,610,497],{"class":588},[378,612,591],{"class":391},[378,614,594],{"class":425},[378,616,617],{"class":434}," dataMax ",[378,619,600],{"class":391},[378,621,622],{"class":438}," 1.1",[378,624,448],{"class":434},[378,626,431],{"class":391},[378,628,399],{"class":434},[306,630,632],{"id":631},"tick-formatting","Tick formatting",[290,634,635,636,639],{},"Use ",[327,637,638],{},"tick-formatter"," to display values in human-readable units. Here, mass in kg is converted to yottagrams (1 Yg = 10²⁴ kg):",[314,641],{"description":642,"name":643,"src":644},"Axis ticks formatted as yottagrams instead of raw kg values.","Tick Formatter","guide-charts\u002Fdomain-tick-formatter-chart",[306,646,648],{"id":647},"tick-count","Tick count",[290,650,635,651,653],{},[327,652,647],{}," to suggest how many ticks to display. The actual number may differ as the scale finds \"nice\" values:",[314,655],{"description":656,"name":657,"src":658},"LineChart with tick-count=5 on both numeric axes.","Tick Count","guide-charts\u002Faxis-ticks-count-chart",[306,660,662],{"id":661},"custom-ticks","Custom ticks",[290,664,665,666,669],{},"If you don't like the automatic tick placement, provide your own tick values directly via the ",[327,667,668],{},"ticks"," prop. This gives you full control over tick positions and labels:",[314,671],{"description":672,"name":673,"src":674},"LineChart with explicit ticks arrays on both axes.","Custom Ticks","guide-charts\u002Faxis-ticks-custom-chart",[369,676,678],{"className":371,"code":677,"language":373,"meta":374,"style":374},"\u003CXAxis type=\"number\" data-key=\"x\" :ticks=\"[0, 110, 220, 330, 440, 550]\" \u002F>\n\n\u003CYAxis :ticks=\"[0, 40, 80, 120, 160, 200]\" \u002F>\n",[327,679,680,754,758],{"__ignoreMap":374},[378,681,682,684,687,690,692,694,697,699,702,704,706,709,711,713,715,717,719,721,723,725,728,730,733,735,738,740,743,745,748,750,752],{"class":380,"line":381},[378,683,392],{"class":391},[378,685,686],{"class":395},"XAxis",[378,688,689],{"class":425}," type",[378,691,428],{"class":391},[378,693,431],{"class":391},[378,695,696],{"class":486},"number",[378,698,431],{"class":391},[378,700,701],{"class":425}," data-key",[378,703,428],{"class":391},[378,705,431],{"class":391},[378,707,708],{"class":486},"x",[378,710,431],{"class":391},[378,712,422],{"class":391},[378,714,668],{"class":425},[378,716,428],{"class":391},[378,718,431],{"class":391},[378,720,435],{"class":434},[378,722,439],{"class":438},[378,724,442],{"class":391},[378,726,727],{"class":438}," 110",[378,729,442],{"class":391},[378,731,732],{"class":438}," 220",[378,734,442],{"class":391},[378,736,737],{"class":438}," 330",[378,739,442],{"class":391},[378,741,742],{"class":438}," 440",[378,744,442],{"class":391},[378,746,747],{"class":438}," 550",[378,749,448],{"class":434},[378,751,431],{"class":391},[378,753,399],{"class":391},[378,755,756],{"class":380,"line":388},[378,757,406],{"emptyLinePlaceholder":405},[378,759,760,762,764,766,768,770,772,774,776,778,781,783,786,788,791,793,796,798,801,803,805],{"class":380,"line":402},[378,761,392],{"class":391},[378,763,396],{"class":395},[378,765,422],{"class":391},[378,767,668],{"class":425},[378,769,428],{"class":391},[378,771,431],{"class":391},[378,773,435],{"class":434},[378,775,439],{"class":438},[378,777,442],{"class":391},[378,779,780],{"class":438}," 40",[378,782,442],{"class":391},[378,784,785],{"class":438}," 80",[378,787,442],{"class":391},[378,789,790],{"class":438}," 120",[378,792,442],{"class":391},[378,794,795],{"class":438}," 160",[378,797,442],{"class":391},[378,799,800],{"class":438}," 200",[378,802,448],{"class":434},[378,804,431],{"class":391},[378,806,399],{"class":391},[306,808,810],{"id":809},"tick-interval","Tick interval",[290,812,292,813,816,817,819],{},[327,814,815],{},"interval"," prop controls which ticks are shown on categorical axes. With many categories, labels may overlap — use ",[327,818,815],{}," to manage this:",[314,821],{"description":822,"name":823,"src":824},"BarChart with interval=0 showing all tick labels, rotated -45°.","Interval = 0","guide-charts\u002Faxis-ticks-interval-chart",[369,826,828],{"className":371,"code":827,"language":373,"meta":374,"style":374},"\u003C!-- Show all ticks -->\n\u003CXAxis :interval=\"0\" \u002F>\n\n\u003C!-- Show every other tick -->\n\u003CXAxis :interval=\"1\" \u002F>\n\n\u003C!-- Preserve the first tick -->\n\u003CXAxis interval=\"preserveStart\" \u002F>\n\n\u003C!-- Preserve the last tick (default) -->\n\u003CXAxis interval=\"preserveEnd\" \u002F>\n\n\u003C!-- Preserve both start and end -->\n\u003CXAxis interval=\"preserveStartEnd\" \u002F>\n",[327,829,830,835,855,859,864,885,889,894,914,918,923,942,946,951],{"__ignoreMap":374},[378,831,832],{"class":380,"line":381},[378,833,834],{"class":384},"\u003C!-- Show all ticks -->\n",[378,836,837,839,841,843,845,847,849,851,853],{"class":380,"line":388},[378,838,392],{"class":391},[378,840,686],{"class":395},[378,842,422],{"class":391},[378,844,815],{"class":425},[378,846,428],{"class":391},[378,848,431],{"class":391},[378,850,439],{"class":438},[378,852,431],{"class":391},[378,854,399],{"class":391},[378,856,857],{"class":380,"line":402},[378,858,406],{"emptyLinePlaceholder":405},[378,860,861],{"class":380,"line":409},[378,862,863],{"class":384},"\u003C!-- Show every other tick -->\n",[378,865,866,868,870,872,874,876,878,881,883],{"class":380,"line":415},[378,867,392],{"class":391},[378,869,686],{"class":395},[378,871,422],{"class":391},[378,873,815],{"class":425},[378,875,428],{"class":391},[378,877,431],{"class":391},[378,879,880],{"class":438},"1",[378,882,431],{"class":391},[378,884,399],{"class":391},[378,886,887],{"class":380,"line":455},[378,888,406],{"emptyLinePlaceholder":405},[378,890,891],{"class":380,"line":460},[378,892,893],{"class":384},"\u003C!-- Preserve the first tick -->\n",[378,895,896,898,900,903,905,907,910,912],{"class":380,"line":466},[378,897,392],{"class":391},[378,899,686],{"class":395},[378,901,902],{"class":425}," interval",[378,904,428],{"class":391},[378,906,431],{"class":391},[378,908,909],{"class":486},"preserveStart",[378,911,431],{"class":391},[378,913,399],{"class":391},[378,915,916],{"class":380,"line":508},[378,917,406],{"emptyLinePlaceholder":405},[378,919,920],{"class":380,"line":513},[378,921,922],{"class":384},"\u003C!-- Preserve the last tick (default) -->\n",[378,924,925,927,929,931,933,935,938,940],{"class":380,"line":519},[378,926,392],{"class":391},[378,928,686],{"class":395},[378,930,902],{"class":425},[378,932,428],{"class":391},[378,934,431],{"class":391},[378,936,937],{"class":486},"preserveEnd",[378,939,431],{"class":391},[378,941,399],{"class":391},[378,943,944],{"class":380,"line":557},[378,945,406],{"emptyLinePlaceholder":405},[378,947,948],{"class":380,"line":562},[378,949,950],{"class":384},"\u003C!-- Preserve both start and end -->\n",[378,952,953,955,957,959,961,963,966,968],{"class":380,"line":568},[378,954,392],{"class":391},[378,956,686],{"class":395},[378,958,902],{"class":425},[378,960,428],{"class":391},[378,962,431],{"class":391},[378,964,965],{"class":486},"preserveStartEnd",[378,967,431],{"class":391},[378,969,399],{"class":391},[306,971,973],{"id":972},"long-category-labels","Long category labels",[290,975,976,977,980],{},"By default, the axis drops labels that don't fit, as Recharts does, so some bars can end up unnamed. To show every label, set ",[327,978,979],{},":interval=\"0\""," and either wrap or rotate them.",[290,982,983,984,987,988,991,992,995,996,998],{},"To wrap, set a ",[327,985,986],{},"width"," in ",[327,989,990],{},"tick",", and give the axis enough ",[327,993,994],{},"height"," for the extra lines. Keep the ",[327,997,986],{}," below each category's share of the plot, and remember that a label can't wrap narrower than its longest word:",[314,1000],{"description":1001,"name":1002,"src":1003},"A bar chart whose long category labels wrap to fit their width.","Wrapped labels","guide-charts\u002Faxis-long-labels-chart",[369,1005,1007],{"className":371,"code":1006,"language":373,"meta":374,"style":374},"\u003CXAxis data-key=\"name\" :interval=\"0\" :tick=\"{ width: 76 }\" :height=\"50\" \u002F>\n",[327,1008,1009],{"__ignoreMap":374},[378,1010,1011,1013,1015,1017,1019,1021,1024,1026,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1049,1052,1055,1058,1061,1063,1065,1067,1069,1071,1074,1076],{"class":380,"line":381},[378,1012,392],{"class":391},[378,1014,686],{"class":395},[378,1016,701],{"class":425},[378,1018,428],{"class":391},[378,1020,431],{"class":391},[378,1022,1023],{"class":486},"name",[378,1025,431],{"class":391},[378,1027,422],{"class":391},[378,1029,815],{"class":425},[378,1031,428],{"class":391},[378,1033,431],{"class":391},[378,1035,439],{"class":438},[378,1037,431],{"class":391},[378,1039,422],{"class":391},[378,1041,990],{"class":425},[378,1043,428],{"class":391},[378,1045,431],{"class":391},[378,1047,1048],{"class":391},"{",[378,1050,1051],{"class":395}," width",[378,1053,1054],{"class":391},":",[378,1056,1057],{"class":438}," 76",[378,1059,1060],{"class":391}," }",[378,1062,431],{"class":391},[378,1064,422],{"class":391},[378,1066,994],{"class":425},[378,1068,428],{"class":391},[378,1070,431],{"class":391},[378,1072,1073],{"class":438},"50",[378,1075,431],{"class":391},[378,1077,399],{"class":391},[290,1079,1080,1081,1086,1087,1090],{},"To rotate, as in the ",[1082,1083,1085],"a",{"href":1084},"#tick-interval","tick interval demo",", set ",[327,1088,1089],{},"angle"," instead:",[369,1092,1094],{"className":371,"code":1093,"language":373,"meta":374,"style":374},"\u003CXAxis data-key=\"name\" :interval=\"0\" :angle=\"-45\" :height=\"60\" \u002F>\n",[327,1095,1096],{"__ignoreMap":374},[378,1097,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1135,1138,1140,1142,1144,1146,1148,1151,1153],{"class":380,"line":381},[378,1099,392],{"class":391},[378,1101,686],{"class":395},[378,1103,701],{"class":425},[378,1105,428],{"class":391},[378,1107,431],{"class":391},[378,1109,1023],{"class":486},[378,1111,431],{"class":391},[378,1113,422],{"class":391},[378,1115,815],{"class":425},[378,1117,428],{"class":391},[378,1119,431],{"class":391},[378,1121,439],{"class":438},[378,1123,431],{"class":391},[378,1125,422],{"class":391},[378,1127,1089],{"class":425},[378,1129,428],{"class":391},[378,1131,431],{"class":391},[378,1133,1134],{"class":391},"-",[378,1136,1137],{"class":438},"45",[378,1139,431],{"class":391},[378,1141,422],{"class":391},[378,1143,994],{"class":425},[378,1145,428],{"class":391},[378,1147,431],{"class":391},[378,1149,1150],{"class":438},"60",[378,1152,431],{"class":391},[378,1154,399],{"class":391},[290,1156,1157,1158,1162],{},"If the chart can get too narrow for either, such as on a phone, put the categories on the ",[1082,1159,1161],{"href":1160},"#yaxis-as-category-type","Y axis",", where each label has the full axis width.",[306,1164,1166],{"id":1165},"minimum-tick-gap","Minimum tick gap",[290,1168,1169,1170,1173],{},"Set ",[327,1171,1172],{},"min-tick-gap"," to specify the minimum pixel spacing between ticks. Ticks that are too close together will be removed:",[369,1175,1177],{"className":371,"code":1176,"language":373,"meta":374,"style":374},"\u003CXAxis :min-tick-gap=\"30\" \u002F>\n",[327,1178,1179],{"__ignoreMap":374},[378,1180,1181,1183,1185,1187,1189,1191,1193,1196,1198],{"class":380,"line":381},[378,1182,392],{"class":391},[378,1184,686],{"class":395},[378,1186,422],{"class":391},[378,1188,1172],{"class":425},[378,1190,428],{"class":391},[378,1192,431],{"class":391},[378,1194,1195],{"class":438},"30",[378,1197,431],{"class":391},[378,1199,399],{"class":391},[306,1201,1203],{"id":1202},"hide-ticks","Hide ticks",[290,1205,1206],{},"To hide tick marks, tick labels, or the axis line individually:",[369,1208,1210],{"className":371,"code":1209,"language":373,"meta":374,"style":374},"\u003C!-- Hide tick marks only -->\n\u003CXAxis :tick-line=\"false\" \u002F>\n\n\u003C!-- Hide tick labels -->\n\u003CXAxis :tick=\"false\" \u002F>\n\n\u003C!-- Hide the axis line -->\n\u003CXAxis :axis-line=\"false\" \u002F>\n\n\u003C!-- Hide everything (invisible axis that still affects layout) -->\n\u003CXAxis :tick=\"false\" :tick-line=\"false\" :axis-line=\"false\" \u002F>\n",[327,1211,1212,1217,1240,1244,1249,1269,1273,1278,1299,1303,1308],{"__ignoreMap":374},[378,1213,1214],{"class":380,"line":381},[378,1215,1216],{"class":384},"\u003C!-- Hide tick marks only -->\n",[378,1218,1219,1221,1223,1225,1228,1230,1232,1236,1238],{"class":380,"line":388},[378,1220,392],{"class":391},[378,1222,686],{"class":395},[378,1224,422],{"class":391},[378,1226,1227],{"class":425},"tick-line",[378,1229,428],{"class":391},[378,1231,431],{"class":391},[378,1233,1235],{"class":1234},"sfNiH","false",[378,1237,431],{"class":391},[378,1239,399],{"class":391},[378,1241,1242],{"class":380,"line":402},[378,1243,406],{"emptyLinePlaceholder":405},[378,1245,1246],{"class":380,"line":409},[378,1247,1248],{"class":384},"\u003C!-- Hide tick labels -->\n",[378,1250,1251,1253,1255,1257,1259,1261,1263,1265,1267],{"class":380,"line":415},[378,1252,392],{"class":391},[378,1254,686],{"class":395},[378,1256,422],{"class":391},[378,1258,990],{"class":425},[378,1260,428],{"class":391},[378,1262,431],{"class":391},[378,1264,1235],{"class":1234},[378,1266,431],{"class":391},[378,1268,399],{"class":391},[378,1270,1271],{"class":380,"line":455},[378,1272,406],{"emptyLinePlaceholder":405},[378,1274,1275],{"class":380,"line":460},[378,1276,1277],{"class":384},"\u003C!-- Hide the axis line -->\n",[378,1279,1280,1282,1284,1286,1289,1291,1293,1295,1297],{"class":380,"line":466},[378,1281,392],{"class":391},[378,1283,686],{"class":395},[378,1285,422],{"class":391},[378,1287,1288],{"class":425},"axis-line",[378,1290,428],{"class":391},[378,1292,431],{"class":391},[378,1294,1235],{"class":1234},[378,1296,431],{"class":391},[378,1298,399],{"class":391},[378,1300,1301],{"class":380,"line":508},[378,1302,406],{"emptyLinePlaceholder":405},[378,1304,1305],{"class":380,"line":513},[378,1306,1307],{"class":384},"\u003C!-- Hide everything (invisible axis that still affects layout) -->\n",[378,1309,1310,1312,1314,1316,1318,1320,1322,1324,1326,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1348,1350],{"class":380,"line":519},[378,1311,392],{"class":391},[378,1313,686],{"class":395},[378,1315,422],{"class":391},[378,1317,990],{"class":425},[378,1319,428],{"class":391},[378,1321,431],{"class":391},[378,1323,1235],{"class":1234},[378,1325,431],{"class":391},[378,1327,422],{"class":391},[378,1329,1227],{"class":425},[378,1331,428],{"class":391},[378,1333,431],{"class":391},[378,1335,1235],{"class":1234},[378,1337,431],{"class":391},[378,1339,422],{"class":391},[378,1341,1288],{"class":425},[378,1343,428],{"class":391},[378,1345,431],{"class":391},[378,1347,1235],{"class":1234},[378,1349,431],{"class":391},[378,1351,399],{"class":391},[1353,1354,1355],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .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 pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":374,"searchDepth":388,"depth":388,"links":1357},[1358,1359,1360,1361,1362,1363,1364,1365,1366,1367,1368,1369],{"id":308,"depth":388,"text":309},{"id":321,"depth":388,"text":322},{"id":338,"depth":388,"text":339},{"id":354,"depth":388,"text":355},{"id":366,"depth":388,"text":367},{"id":631,"depth":388,"text":632},{"id":647,"depth":388,"text":648},{"id":661,"depth":388,"text":662},{"id":809,"depth":388,"text":810},{"id":972,"depth":388,"text":973},{"id":1165,"depth":388,"text":1166},{"id":1202,"depth":388,"text":1203},"Set the axis range, and control tick count, placement, spacing and labels","md",null,{},{"icon":46},{"title":43,"description":1370},"dvtax1QvOOJTd8DXu9djS-UFvaeCNT4WScMy1ljm7JE",[1378,1380],{"title":38,"path":39,"stem":40,"description":1379,"icon":41,"children":-1},"Learn how to customize chart appearance using slots, Cell, and SVG attributes",{"title":48,"path":49,"stem":50,"description":1381,"icon":51,"children":-1},"Fixed, full-width and aspect-ratio charts",1793527165704]