Axis Ticks
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.
Tick count
Use tick-count to suggest how many ticks to display. The actual number may differ as the scale finds "nice" values:
Custom ticks
If you don't like the automatic tick placement, provide your own tick values directly via the ticks prop. This gives you full control over tick positions and labels:
<XAxis type="number" data-key="x" :ticks="[0, 110, 220, 330, 440, 550]" />
<YAxis :ticks="[0, 40, 80, 120, 160, 200]" />
Tick interval
The interval prop controls which ticks are shown on categorical axes. With many categories, labels may overlap — use interval to manage this:
<!-- Show all ticks -->
<XAxis :interval="0" />
<!-- Show every other tick -->
<XAxis :interval="1" />
<!-- Preserve the first tick (default) -->
<XAxis interval="preserveStart" />
<!-- Preserve the last tick -->
<XAxis interval="preserveEnd" />
<!-- Preserve both start and end -->
<XAxis interval="preserveStartEnd" />
Minimum tick gap
Set min-tick-gap to specify the minimum pixel spacing between ticks. Ticks that are too close together will be removed:
<XAxis :min-tick-gap="30" />
Hide ticks
To hide tick marks, tick labels, or the axis line individually:
<!-- Hide tick marks only -->
<XAxis :tick-line="false" />
<!-- Hide tick labels -->
<XAxis :tick="false" />
<!-- Hide the axis line -->
<XAxis :axis-line="false" />
<!-- Hide everything (invisible axis that still affects layout) -->
<XAxis :tick="false" :tick-line="false" :axis-line="false" />