Victory Chart - How to add Axis extra tick

[melly35]

How are the ticks made in the area indicated by the red arrow in the picture?

Data = [0,10,20,30, ..n]

Short description: Adding extra ticks between 0-10 or 10-20 or 20-30

[BeyondThat]

https://codesandbox.io/s/broken-resonance-qtcw2y?file=/src/App.js

<VictoryAxis crossAxis={false} style={{ ticks: { stroke: "grey", size: ({ tick }) => (tick % 10 ? 5 : 10) } }} tickCount={50} tickFormat={(tick) => (tick % 10 ? null : tick)} />

[melly35]

https://codesandbox.io/s/broken-resonance-qtcw2y?file=/src/App.js

<VictoryAxis crossAxis={false} style={{ ticks: { stroke: "grey", size: ({ tick }) => (tick % 10 ? 5 : 10) } }} tickCount={50} tickFormat={(tick) => (tick % 10 ? null : tick)} />

Thank you, but how can this be done in a data like 2021/06/12 10:00:00?

[sem4phor]

Just update the functions in the proposed solution to match your logic.

For having full control over the ticks you can use tickValues prop

[helagoddr]

hi @sem4phor how to add background and border radius for ticklabels in victory native charts? i want to highlight specific x axis label

[sem4phor]

@helagoddr For our financial chart we passed the current price to a custom tick label component:

const YAxisTickLabel = props => {
  const { datum, currentPrice } = props

  const isCurrentPriceTick = datum === currentPrice

  if (!isCurrentPriceTick) return <VictoryLabel {...props} />

  return (
    <VictoryLabel
      animate={false}
      {...props}
      style={{ color: 'black', fontSize: 12 }}
      backgroundStyle={{
        fill: 'green'
      }}
    />
  )
}

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.