Using timestamps as x-axis values results in misaligned labels

[davestewart]

Hello,

We're using timestamps as our Datum x-axis values, but it seems to result in misaligned x-axis labels:

Using indices, the labels line up perfectly:

Feels like a bug.

Is it?

[AnthonyCVP]

+1, I am having the same problem.

[davestewart]

Right now I am using the following workaround:

• add index values to data (which already contains timestamp)
• set x-axis as (d) => d.index
• in tickFormat() do this: tickFormat: (x, index) => formatAsMonth(data[index].timestamp)

EDIT: index will be incorrect if numTicks is modified (index is the index of the tick, not the datapoint), so will need to determine the datapoint index with something like:

tickFormat: (x: number) => {
  // workaround for https://github.com/f5/unovis/issues/450
  if (format.startsWith('date')) {
    const index = model.data.findIndex(d => d.index === x)
    return formatValue(model.data[index].timestamp, format)
  }
  return formatValue(x, format)
},

This gets us over a hump, until hopefully a fix arrives:

[AnthonyCVP]

Thank you, I did that after your original post suggestion. Much appreciated @davestewart !

[garbit]

Neat work around @davestewart - thanks

[dennisadriaans]

@davestewart does indeed fix it. A small addition: NumericAccessor has an index parameter you could use so that you can leave the original data untouched.

<VisGroupedBar :data="data" :x="(_: T, index: number) => index" />
<VisAxis :tick-format="(index: number) => { const value = data[index] }" />

Then you can format your date as needed.

[davestewart]

@dennisadriaans thanks! I'll confirm when I'm back on this bit of the project.

[rokotyan]

Currently, this is the expected behavior of the axis component - it doesn't know anything about your data and assumes the data is continuous and behaves the same whether you have hundreds of data points or just a few.

We may tweak this behavior later, but for now we plan to leave it as it is because it's pretty easy to reconfigure by explicitly providing an array of `tickValues'.