Chart.js: Linechart points not aligned with x-axis tick labels on label-skipping

[MrMufflon]

Expected Behavior

When x-axis labels are skipped the points must be drawn at the correct position.

Current Behavior

The points have an offset.

Possible Solution

Steps to Reproduce (for bugs)

Use the sample https://www.chartjs.org/samples/next/charts/line/basic.html
Add datasets until x-axis starts skipping labels. The points now do not align with the tick labels anymore.

Context

I'm writing a plugin where I use scale.getPixelForValue() and the offset occured. Got to reproduce it with the regular sample.

Environment

• Chart.js version: 3.0.0-alpha
• Browser name and version: Chrome 80

[kurkle]

Fixed already by #7225
See: https://www.chartjs.org/samples/master/charts/line/basic.html

[MrMufflon]

This still happens when the x-axis labels are condensed after adding data. In the screenshot I use Chrome 83. It shows the October data on the November tick.

[benmccann]

@MrMufflon can you provide an interactive example on a site like plunkr or codepen?

[MrMufflon]

@benmccann you can just use the sample site and click "add data" until the x-axis labels start to skip...
https://www.chartjs.org/samples/master/charts/line/basic.html

[benmccann]

thanks! sorry I didn't look closely enough at your original comment to notice that

[MrMufflon]

@benmccann I could try to help here, but I need a few hints where to start looking. I'm fairly new to the chart.js internals...

[benmccann]

Maybe something related to the category scale and autoSkip? I'm not quite sure without debugging it

[MrMufflon]

I think it's not related to the category scale, since it also happens in a timeseries in the samples.
https://www.chartjs.org/samples/next/scales/time/line.html

I think it is related to the fit() method in core.scale.js I tried setting the paddingRight to 0, but the it works only for an even amount of tickLabels.

[benmccann]

The data points are supposed to be aligned with the labels in the time sample you linked to. Note that it's a time chart and not a timeseries chart. If it were a timeseries chart I'd generally expect them to be aligned. But the image you're showing uses "Sep 13, 2020 13:41" which isn't an even date and so that's why it's being plotted between dates

And actually I can't reproduce any issue on https://www.chartjs.org/samples/next/charts/line/basic.html either now, so I think if there was a bug here before it's been fixed

[MrMufflon]

You are right about the time chart, my bad. It definetly got better, but on some occasions the data still does not line up with the grid and the tick labels. Mainly when the datasetlength is uneven I think.

[kurkle]

This is definitely reproducible with master. These images are at both edges of the autoSkip kicking in, so just a slight change in size.

[kungpaogao]

Will this fix be in the next release? Thanks for the hard work devs!

[etimberg]

@kungpaogao this fix shipped in v3.0.0-alpha.2

[kungpaogao]

Ok, so I thought that this issue was related to what I'm experiencing, but I've updated to v3.0.0-alpha.2, and I'm still running into the same issue as before.

Screenshot

Code

I'm using React + TailwindCSS — is this causing styling conflicts?

// register stuff
Chart.register(
      LineController,
      Line,
      LinearScale,
      Point,
      Tooltip,
      Legend,
      TimeScale
 );

// options
const options = {
    scales: {
      x: {
        type: "time",
        time: {
          parser: timeFormat,
          tooltipFormat: "MMM DD",
        },
        ticks: {
          autoSkip: false,
          // maxTicksLimit: 12,
        },
        // gridLines: {
        //   display: false,
        // },
      },
    },
    legend: {
      display: false,
    },
    tooltips: {
      enabled: true,
    },
  };

Please let me know if I can provide some other details!

[kungpaogao]

Never mind, I'm dumb. I needed to set time.round:

scales: {
  x: {
    type: "time",
    time: {
      parser: timeFormat,
      tooltipFormat: "MMM DD",
      unit: "day",
      round: "day",
    },
     ...
  },
},