class CustomizedAxisTick extends PureComponent {
render() {
const { x, y, payload, width, index, visibleTicksCount } = this.props
const colWidth = width / visibleTicksCount
const extra = index === 0 ? 0 : 16
const delta = colWidth / 2 + extra
return (
<g transform={`translate(${x},${y})`}>
<text
x={0}
y={-14}
textAnchor="end"
fill="#9ca1b2"
transform={`translate(${delta},0)`}
fontFamily="monospace"
fontSize="20"
>
{payload.value}
</text>
</g>
)
}
}