f5 / unovis

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript
https://unovis.dev
Apache License 2.0
2.27k stars 43 forks source link

Using timestamps as x-axis values results in misaligned labels #450

Open davestewart opened 1 month ago

davestewart commented 1 month ago

Hello,

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

image

Using indices, the labels line up perfectly:

image

Feels like a bug.

Is it?

AnthonyCVP commented 1 month ago

+1, I am having the same problem.

davestewart commented 1 month ago

Right now I am using the following workaround:

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:

CleanShot 2024-09-26 at 18 16 06

AnthonyCVP commented 1 month ago

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