How to avoid tick duplicates when using tickFormatter?

[dmdum]

I'm using tickFormatter to to change how the ticks are displayed. I would like it so there are no duplicates after the ticks are transformed. Using allowDuplicatedCategory: false doesn't seem to work for tickFormatter.

Is there any other way I can avoid duplicates?
Thank you.

[ckifer]

allowDuplicatedCategory only respects the actual values given to the chart. You will have to dedupe yourself in that case

[dmdum]

I see, thank you!

[shettyvega]

@ckifer I have a similar problem. My datakey is a timestamp but I am formatting it to be MM'YYYY, Because of this, I have repeating months show up on the x axis. Is there a getTicks function I can use and filter out the repeating ticks myself? Thanks.

[ckifer]

In your case you would only add a value to your ticks array if you don't already have one for that month

[shettyvega]

So basically I will have to create the ticks array with the evenly distributed timestamps (without month repetition) and the tickFormatter (MM'YYYY) remains as is.

[ckifer]

Correct. Don't worry about distribution until you see what the chart looks like after crafting the array

Psuedo code:

// assume the array is sorted by date ascending

getTicks(data)
  ticks = []
  for item of data
    month = getMonthOfItem(item)
    if ticks does not have an entry with `month`
      ticks.push(month)
   return ticks
      
      
`XAxis ticks={ticks} ... />`

[shettyvega]

I will give this a try. Thank you for the prompt replies.

[shettyvega]

This is what I have. However, the ticks don't show up on the chart anymore.

`
   const getTicks = (data) => {
		let ticks: any = []
		data.forEach(item => {
			const month = dayjs(item.valDate).get('M')
			const year = dayjs(item.valDate).get('y')

			if (!ticks.includes(`${month} ${year}`)) {
				ticks.push(`${month} ${year}`)
			}
		})

		// covert to ISO string since valDate is in ISO format
		ticks = ticks.map(item => dayjs(item, 'M YYYY').toISOString())

		/* console log
			[
    "2021-04-01T04:00:00.000Z",
    "2021-05-01T04:00:00.000Z",
    "2021-06-01T04:00:00.000Z",
    "2021-07-01T04:00:00.000Z",
    "2021-08-01T04:00:00.000Z",
    "2021-09-01T04:00:00.000Z"
]
		*/
	return ticks
}
`

my xAxis props:

xAxis: {
						dataKey: 'valDate',
						tickFormatter: (value: any) => dayjs(value).format("MMM'YY"),
						tickMargin: 5,
						ticks: getTicks(data),
					},