VictoryAxis tickLabels style and tick position

[primozs]

I have this VictoryAxis (x) settings:
I don't know how to make the space between VictoryAxis line and tick Label smaller. Also I cant figure it out how to make (x) axis first tick start at the beginning.

    const tickStyle = {
      axis: {
        stroke: 'black',
        strokeOpacity: 0
      },
      ticks: {
        size: 2,
        stroke: 'black',
        strokeOpacity: 0.1
      },
      grid: {
        stroke: 'rgba(0, 0, 0, 0.1)',
        strokeWidth: 1,
        strokeDasharray: '6, 6',
      },
      tickLabels: {
        fontSize: '9px',
        fontFamily: 'inherit',
        fillOpacity: 1,
        margin: 0,
        padding: 0
      },
      axisLabel: {
        fontsize: 13
      }
    };

  <VictoryAxis
            domain={domain.xDomain}
            tickFormat={(v) => fecha.format(new Date(v), 'HH:mm')}
            tickCount={10}
            domainPadding={0}
            style={tickStyle}
            padding={0}
            height={10}
            offsetX={30}
            offsetY={0}
          />

Thank you very much for help.
Cheers

[boygirl]

@primozs

You can make the spacing between the axis and the tickLabel smaller by changing style like
style={{ticks: {padding: 0}}}. After looking at this ticket, I realized that tickLabels padding was not being applied. I've corrected the issue, so you'll be able to use that too in the next patch release. As for making the first tick appear closer to the origin, you should set the tickValues prop explicitly. otherwise, d3-scale will calculate some "nice" tick values for you that might not be exactly what you want. Also note that Victory will filter zeroes from your ticks by default when axes cross. to turn off this behavior, set crossAxis={false} on your axis.

[primozs]

@boygirl Thank you!

[cazar27]

Yes, it works, but in my case the y-axis disappears