in src/XTicks.js [94:138]
render() {
const {
height,
xScale,
tickCount,
position,
tickLength,
tickStyle,
tickClassName,
spacingTop,
spacingBottom,
} = this.props;
const placement =
this.props.placement || (position === 'top' ? 'above' : 'below');
const ticks = this.props.ticks || getScaleTicks(xScale, null, tickCount);
const className = `rct-chart-tick rct-chart-tick-x ${tickClassName || ''}`;
const transform =
position === 'bottom'
? `translate(0, ${height + (spacingBottom || 0)})`
: `translate(0, ${-spacingTop || 0})`;
return (
<g className="rct-chart-ticks-x" transform={transform} aria-hidden="true">
{ticks.map((tick, i) => {
const x1 = xScale(tick);
const y2 = placement === 'above' ? -tickLength : tickLength;
return (
<line
{...{
x1,
x2: x1,
y1: 0,
y2,
className,
style: tickStyle,
key: `tick-${i}`,
}}
/>
);
})}
</g>
);
}