victory
victory copied to clipboard
Victory Chart - How to add Axis extra tick
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
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)} />
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?
Just update the functions in the proposed solution to match your logic.
For having full control over the ticks you can use tickValues prop
hi @sem4phor how to add background and border radius for ticklabels in victory native charts? i want to highlight specific x axis label
@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'
}}
/>
)
}
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.
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.