[{"data":1,"prerenderedAt":764},["ShallowReactive",2],{"navigation_docs":3,"-guides-axis-ticks":177,"-guides-axis-ticks-surround":759},[4,21,77,137],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","/getting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guides","i-lucide-book-open","/guides","2.guides",[27,32,37,42,47,52,57,62,67,72],{"title":28,"path":29,"stem":30,"icon":31},"Customize","/guides/customize","2.guides/01.customize","i-lucide-paintbrush",{"title":33,"path":34,"stem":35,"icon":36},"Active Index","/guides/active-state","2.guides/02.active-state","i-lucide-mouse-pointer",{"title":38,"path":39,"stem":40,"icon":41},"Domain and Ticks","/guides/domain-and-ticks","2.guides/03.domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Axis Ticks","/guides/axis-ticks","2.guides/04.axis-ticks","i-lucide-hash",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","/guides/chart-size","2.guides/05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Index and Layers","/guides/z-order-and-layers","2.guides/06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","/guides/coordinate-systems","2.guides/07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","/guides/performance","2.guides/08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","/guides/rounded-bar-corners","2.guides/09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","/guides/bar-alignment","2.guides/10.bar-alignment","i-lucide-align-center",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":20},"Charts","i-lucide-bar-chart-3","/charts","3.charts",[83,88,93,98,103,108,113,118,123,128,133],{"title":84,"path":85,"stem":86,"icon":87},"Area Chart","/charts/area-chart","3.charts/1.area-chart","i-lucide-area-chart",{"title":89,"path":90,"stem":91,"icon":92},"Treemap","/charts/treemap","3.charts/10.treemap","i-lucide-layout-grid",{"title":94,"path":95,"stem":96,"icon":97},"Sankey","/charts/sankey","3.charts/11.sankey","i-lucide-git-fork",{"title":99,"path":100,"stem":101,"icon":102},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":104,"path":105,"stem":106,"icon":107},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":109,"path":110,"stem":111,"icon":112},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":114,"path":115,"stem":116,"icon":117},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":119,"path":120,"stem":121,"icon":122},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":124,"path":125,"stem":126,"icon":127},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":129,"path":130,"stem":131,"icon":132},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":134,"path":135,"stem":136,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":20},"Components","i-lucide-code","/components","4.components",[143,148,153,158,163,167,172],{"title":144,"path":145,"stem":146,"icon":147},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":149,"path":150,"stem":151,"icon":152},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":154,"path":155,"stem":156,"icon":157},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":159,"path":160,"stem":161,"icon":162},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":164,"path":165,"stem":166,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":168,"path":169,"stem":170,"icon":171},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":173,"path":174,"stem":175,"icon":176},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":178,"title":43,"body":179,"description":752,"extension":753,"links":754,"meta":755,"navigation":756,"path":44,"seo":757,"stem":45,"__hash__":758},"docs/2.guides/04.axis-ticks.md",{"type":180,"value":181,"toc":745},"minimark",[182,186,191,198,204,208,215,220,372,376,386,391,551,555,562,588,592,595,741],[183,184,185],"p",{},"Axis ticks are the labeled markers along each axis. vccs provides several props to control how many ticks appear, where they are placed, and how they are spaced.",[187,188,190],"h2",{"id":189},"tick-count","Tick count",[183,192,193,194,197],{},"Use ",[195,196,189],"code",{}," to suggest how many ticks to display. The actual number may differ as the scale finds \"nice\" values:",[199,200],"chart-demo",{"description":201,"name":202,"src":203},"LineChart with tick-count=5 on both numeric axes.","Tick Count","guide-charts/axis-ticks-count-chart",[187,205,207],{"id":206},"custom-ticks","Custom ticks",[183,209,210,211,214],{},"If you don't like the automatic tick placement, provide your own tick values directly via the ",[195,212,213],{},"ticks"," prop. This gives you full control over tick positions and labels:",[199,216],{"description":217,"name":218,"src":219},"LineChart with explicit ticks arrays on both axes.","Custom Ticks","guide-charts/axis-ticks-custom-chart",[221,222,227],"pre",{"className":223,"code":224,"language":225,"meta":226,"style":226},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CXAxis type=\"number\" data-key=\"x\" :ticks=\"[0, 110, 220, 330, 440, 550]\" />\n\u003CYAxis :ticks=\"[0, 40, 80, 120, 160, 200]\" />\n","vue","",[195,228,229,321],{"__ignoreMap":226},[230,231,234,238,242,246,249,252,256,258,261,263,265,268,270,273,275,277,279,283,287,290,293,295,298,300,303,305,308,310,313,316,318],"span",{"class":232,"line":233},"line",1,[230,235,237],{"class":236},"sMK4o","\u003C",[230,239,241],{"class":240},"swJcz","XAxis",[230,243,245],{"class":244},"spNyl"," type",[230,247,248],{"class":236},"=",[230,250,251],{"class":236},"\"",[230,253,255],{"class":254},"sfazB","number",[230,257,251],{"class":236},[230,259,260],{"class":244}," data-key",[230,262,248],{"class":236},[230,264,251],{"class":236},[230,266,267],{"class":254},"x",[230,269,251],{"class":236},[230,271,272],{"class":236}," :",[230,274,213],{"class":244},[230,276,248],{"class":236},[230,278,251],{"class":236},[230,280,282],{"class":281},"sTEyZ","[",[230,284,286],{"class":285},"sbssI","0",[230,288,289],{"class":236},",",[230,291,292],{"class":285}," 110",[230,294,289],{"class":236},[230,296,297],{"class":285}," 220",[230,299,289],{"class":236},[230,301,302],{"class":285}," 330",[230,304,289],{"class":236},[230,306,307],{"class":285}," 440",[230,309,289],{"class":236},[230,311,312],{"class":285}," 550",[230,314,315],{"class":281},"]",[230,317,251],{"class":236},[230,319,320],{"class":236}," />\n",[230,322,324,326,329,331,333,335,337,339,341,343,346,348,351,353,356,358,361,363,366,368,370],{"class":232,"line":323},2,[230,325,237],{"class":236},[230,327,328],{"class":240},"YAxis",[230,330,272],{"class":236},[230,332,213],{"class":244},[230,334,248],{"class":236},[230,336,251],{"class":236},[230,338,282],{"class":281},[230,340,286],{"class":285},[230,342,289],{"class":236},[230,344,345],{"class":285}," 40",[230,347,289],{"class":236},[230,349,350],{"class":285}," 80",[230,352,289],{"class":236},[230,354,355],{"class":285}," 120",[230,357,289],{"class":236},[230,359,360],{"class":285}," 160",[230,362,289],{"class":236},[230,364,365],{"class":285}," 200",[230,367,315],{"class":281},[230,369,251],{"class":236},[230,371,320],{"class":236},[187,373,375],{"id":374},"tick-interval","Tick interval",[183,377,378,379,382,383,385],{},"The ",[195,380,381],{},"interval"," prop controls which ticks are shown on categorical axes. With many categories, labels may overlap — use ",[195,384,381],{}," to manage this:",[199,387],{"description":388,"name":389,"src":390},"BarChart with interval=0 showing all tick labels, rotated -45°.","Interval = 0","guide-charts/axis-ticks-interval-chart",[221,392,394],{"className":223,"code":393,"language":225,"meta":226,"style":226},"\u003C!-- Show all ticks -->\n\u003CXAxis :interval=\"0\" />\n\n\u003C!-- Show every other tick -->\n\u003CXAxis :interval=\"1\" />\n\n\u003C!-- Preserve the first tick (default) -->\n\u003CXAxis interval=\"preserveStart\" />\n\n\u003C!-- Preserve the last tick -->\n\u003CXAxis interval=\"preserveEnd\" />\n\n\u003C!-- Preserve both start and end -->\n\u003CXAxis interval=\"preserveStartEnd\" />\n",[195,395,396,402,422,429,435,457,462,468,489,494,500,520,525,531],{"__ignoreMap":226},[230,397,398],{"class":232,"line":233},[230,399,401],{"class":400},"sHwdD","\u003C!-- Show all ticks -->\n",[230,403,404,406,408,410,412,414,416,418,420],{"class":232,"line":323},[230,405,237],{"class":236},[230,407,241],{"class":240},[230,409,272],{"class":236},[230,411,381],{"class":244},[230,413,248],{"class":236},[230,415,251],{"class":236},[230,417,286],{"class":285},[230,419,251],{"class":236},[230,421,320],{"class":236},[230,423,425],{"class":232,"line":424},3,[230,426,428],{"emptyLinePlaceholder":427},true,"\n",[230,430,432],{"class":232,"line":431},4,[230,433,434],{"class":400},"\u003C!-- Show every other tick -->\n",[230,436,438,440,442,444,446,448,450,453,455],{"class":232,"line":437},5,[230,439,237],{"class":236},[230,441,241],{"class":240},[230,443,272],{"class":236},[230,445,381],{"class":244},[230,447,248],{"class":236},[230,449,251],{"class":236},[230,451,452],{"class":285},"1",[230,454,251],{"class":236},[230,456,320],{"class":236},[230,458,460],{"class":232,"line":459},6,[230,461,428],{"emptyLinePlaceholder":427},[230,463,465],{"class":232,"line":464},7,[230,466,467],{"class":400},"\u003C!-- Preserve the first tick (default) -->\n",[230,469,471,473,475,478,480,482,485,487],{"class":232,"line":470},8,[230,472,237],{"class":236},[230,474,241],{"class":240},[230,476,477],{"class":244}," interval",[230,479,248],{"class":236},[230,481,251],{"class":236},[230,483,484],{"class":254},"preserveStart",[230,486,251],{"class":236},[230,488,320],{"class":236},[230,490,492],{"class":232,"line":491},9,[230,493,428],{"emptyLinePlaceholder":427},[230,495,497],{"class":232,"line":496},10,[230,498,499],{"class":400},"\u003C!-- Preserve the last tick -->\n",[230,501,503,505,507,509,511,513,516,518],{"class":232,"line":502},11,[230,504,237],{"class":236},[230,506,241],{"class":240},[230,508,477],{"class":244},[230,510,248],{"class":236},[230,512,251],{"class":236},[230,514,515],{"class":254},"preserveEnd",[230,517,251],{"class":236},[230,519,320],{"class":236},[230,521,523],{"class":232,"line":522},12,[230,524,428],{"emptyLinePlaceholder":427},[230,526,528],{"class":232,"line":527},13,[230,529,530],{"class":400},"\u003C!-- Preserve both start and end -->\n",[230,532,534,536,538,540,542,544,547,549],{"class":232,"line":533},14,[230,535,237],{"class":236},[230,537,241],{"class":240},[230,539,477],{"class":244},[230,541,248],{"class":236},[230,543,251],{"class":236},[230,545,546],{"class":254},"preserveStartEnd",[230,548,251],{"class":236},[230,550,320],{"class":236},[187,552,554],{"id":553},"minimum-tick-gap","Minimum tick gap",[183,556,557,558,561],{},"Set ",[195,559,560],{},"min-tick-gap"," to specify the minimum pixel spacing between ticks. Ticks that are too close together will be removed:",[221,563,565],{"className":223,"code":564,"language":225,"meta":226,"style":226},"\u003CXAxis :min-tick-gap=\"30\" />\n",[195,566,567],{"__ignoreMap":226},[230,568,569,571,573,575,577,579,581,584,586],{"class":232,"line":233},[230,570,237],{"class":236},[230,572,241],{"class":240},[230,574,272],{"class":236},[230,576,560],{"class":244},[230,578,248],{"class":236},[230,580,251],{"class":236},[230,582,583],{"class":285},"30",[230,585,251],{"class":236},[230,587,320],{"class":236},[187,589,591],{"id":590},"hide-ticks","Hide ticks",[183,593,594],{},"To hide tick marks, tick labels, or the axis line individually:",[221,596,598],{"className":223,"code":597,"language":225,"meta":226,"style":226},"\u003C!-- Hide tick marks only -->\n\u003CXAxis :tick-line=\"false\" />\n\n\u003C!-- Hide tick labels -->\n\u003CXAxis :tick=\"false\" />\n\n\u003C!-- Hide the axis line -->\n\u003CXAxis :axis-line=\"false\" />\n\n\u003C!-- Hide everything (invisible axis that still affects layout) -->\n\u003CXAxis :tick=\"false\" :tick-line=\"false\" :axis-line=\"false\" />\n",[195,599,600,605,628,632,637,658,662,667,688,692,697],{"__ignoreMap":226},[230,601,602],{"class":232,"line":233},[230,603,604],{"class":400},"\u003C!-- Hide tick marks only -->\n",[230,606,607,609,611,613,616,618,620,624,626],{"class":232,"line":323},[230,608,237],{"class":236},[230,610,241],{"class":240},[230,612,272],{"class":236},[230,614,615],{"class":244},"tick-line",[230,617,248],{"class":236},[230,619,251],{"class":236},[230,621,623],{"class":622},"sfNiH","false",[230,625,251],{"class":236},[230,627,320],{"class":236},[230,629,630],{"class":232,"line":424},[230,631,428],{"emptyLinePlaceholder":427},[230,633,634],{"class":232,"line":431},[230,635,636],{"class":400},"\u003C!-- Hide tick labels -->\n",[230,638,639,641,643,645,648,650,652,654,656],{"class":232,"line":437},[230,640,237],{"class":236},[230,642,241],{"class":240},[230,644,272],{"class":236},[230,646,647],{"class":244},"tick",[230,649,248],{"class":236},[230,651,251],{"class":236},[230,653,623],{"class":622},[230,655,251],{"class":236},[230,657,320],{"class":236},[230,659,660],{"class":232,"line":459},[230,661,428],{"emptyLinePlaceholder":427},[230,663,664],{"class":232,"line":464},[230,665,666],{"class":400},"\u003C!-- Hide the axis line -->\n",[230,668,669,671,673,675,678,680,682,684,686],{"class":232,"line":470},[230,670,237],{"class":236},[230,672,241],{"class":240},[230,674,272],{"class":236},[230,676,677],{"class":244},"axis-line",[230,679,248],{"class":236},[230,681,251],{"class":236},[230,683,623],{"class":622},[230,685,251],{"class":236},[230,687,320],{"class":236},[230,689,690],{"class":232,"line":491},[230,691,428],{"emptyLinePlaceholder":427},[230,693,694],{"class":232,"line":496},[230,695,696],{"class":400},"\u003C!-- Hide everything (invisible axis that still affects layout) -->\n",[230,698,699,701,703,705,707,709,711,713,715,717,719,721,723,725,727,729,731,733,735,737,739],{"class":232,"line":502},[230,700,237],{"class":236},[230,702,241],{"class":240},[230,704,272],{"class":236},[230,706,647],{"class":244},[230,708,248],{"class":236},[230,710,251],{"class":236},[230,712,623],{"class":622},[230,714,251],{"class":236},[230,716,272],{"class":236},[230,718,615],{"class":244},[230,720,248],{"class":236},[230,722,251],{"class":236},[230,724,623],{"class":622},[230,726,251],{"class":236},[230,728,272],{"class":236},[230,730,677],{"class":244},[230,732,248],{"class":236},[230,734,251],{"class":236},[230,736,623],{"class":622},[230,738,251],{"class":236},[230,740,320],{"class":236},[742,743,744],"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":226,"searchDepth":323,"depth":323,"links":746},[747,748,749,750,751],{"id":189,"depth":323,"text":190},{"id":206,"depth":323,"text":207},{"id":374,"depth":323,"text":375},{"id":553,"depth":323,"text":554},{"id":590,"depth":323,"text":591},"Control tick count, placement, and spacing on chart axes","md",null,{},{"icon":46},{"title":43,"description":752},"KzyXT0Mp4iQAJRt5BP0IIwfqPsOOoYWSazaOZJEJHmE",[760,762],{"title":38,"path":39,"stem":40,"description":761,"icon":41,"children":-1},"Configure axis range, data domain, and tick formatting",{"title":48,"path":49,"stem":50,"description":763,"icon":51,"children":-1},"Control chart dimensions with explicit sizing or responsive containers",1775929453605]