Misaligned ticks for week-based time scale

Hi,

I’m trying to plot weeks in a year to a line chart (see this codesandbox) My input data point looks like:

[
  {
     x: "2019-W33",
     y: 618940
  },...
]

The xAxis:

xScale={{
  type: "time",
  format: "%Y-W%V"
}}
axisBottom={{
  format: "%Y-W%V",
  tickValues: "every week"
}}

But the axis ticks are not aligned with the line’s points and the grid columns are not equally spaced. I’m filling this as a bug but please let me know if I’m doing something wrong…

Thank you

[wyze]

I set useUTC: false on the xScale property.

[swiharta]

If it helps anyone, I currently addressed my issue with a function that produces the tick values explicitly. In my case, point.x values are Date objects, which are specific to a given time interval. See a CodeSandbox above for an example. start and end are the min and max dates included in the chart data, intervalType is ‘week’, 'month, 'day, or ‘year’, and intervalNum is the number of intervals (ex. 3 months) per data point.

getIntervalTicks = (data, maxTicks=12) => {
  if (!(data && data.length)) {
    console.log('not able to explicitly generate ticks')
      return 8 // fallback to automatically generated ticks of this number
  }
  const {start, end, intervalNum, intervalType} = this.state
  const intervalCount = Math.floor(moment(end).diff(start, intervalType) / intervalNum)
  return data[0].data.reduce((accum, point, index) => {
      const divisor = Math.ceil(intervalCount / maxTicks)
      if (index % divisor === 0)
          accum.push(point.x)
      return accum
  }, [])
}

Then I call this function from the chart parameters as below:

axisBottom: {
  // blah, blah, blah...
  tickValues: this.getIntervalTicks(data),
},
gridXValues: this.getIntervalTicks(data),

This results in limiting the number of ticks to the maxTicks value. So if you have maxTicks=12, and 12 months of data you get 12 ticks, but if you have 13 data points, you’ll drop your number of ticks down to 6, then with 14 data points, it goes to 7 ticks, etc…