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