render()

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>
    );
  }