v2 to v4 timeseries migration

[andreygit]

Documentation Is:

• Missing or needed?
• Confusing
• Not sure?

Please Explain in Detail...

Here is how chart js v2 looks with { distribution: 'series' } option

And here is v3, v4 view

So i need to make ticks with regular interval, but can't find any option which could do that.

Your Proposal for Changes

So how is it possible to control ticks representation and make those regular interval (exactly how it is done in chart.js v2 )?

Attaching codepen sample with a current options i've been trying.

Example

https://codepen.io/andreytchoptimus/pen/rNQyNeq

[etimberg]

I think because the data is provided as x/y points it would be better to use type: 'time' rather than type: 'timeseries'. The timeseries axis puts the data regularly spaced even if the time between each point is different. In the example you linked, that causes distortion that makes the data look different than it actually is

[andreygit]

the data is drawn exactly how it expected to be (see example chartjs v2). The problem is ticks - expected to have regular interval.

[stockiNail]

I think you could try to use time scale and bounds to 'ticks'.

scales: {
  x: {
    type: 'time',
    display: true,
    bounds: 'ticks',
    ...
  },

Updating your codepen:

[andreygit]

I need to visualize data with irregular time interval.
The solution need to give "equidistant" points as well as ticks. Like it on 1 picture i've attached (chart.js v2).

from docs:
"The time series scale extends from the time scale and supports all the same options. However, for the time series scale, each data point is spread equidistant."
https://www.chartjs.org/docs/latest/axes/cartesian/timeseries.html

[stockiNail]

@andreygit I misunderstood your need, apologize. Doing some test I see the differences your highlighted.

Using ticks.source: 'data' in V4 you have a more readable representation but not the same of version 2 (created a codepen with v2 to see the behavior: https://codepen.io/stockinail/pen/yLQbbBy)

@etimberg I used in the codepen (with 2.9.4) the same datasets and similar axes config (adding distribution) and in fact the result between v2 and v4 sounds quite different.

[stockiNail]

I think the issue is in addTick function of scale.time because if the tick (epoch) already exists in the ticks object is override and not maintained. This is, in my opinion, why the ticks are now drawn for each data point even if is a time series (difference from v2).

[matheusgrandi]

I had a similar problem and fixed changing the source to 'data':

          x: {
            type: 'timeseries',
            display: true,

           ...

            ticks: {
              autoSkip: true,
              source: 'data',
              display: true,

[stockiNail]

@matheusgrandi can you provide a codepen where it's working for you? Because, using your config in @andreygit sample, the result is not what is expected.

[stockiNail]

@etimberg sorry if I'm asking you but I'd like to know your thought about this issue. In my opinion, the behavior of time series scale (v3-v4) comparing with time scale with distribution series (v2) is quite different.
I was testing a PR to re-implement the old behavior but I have a doubt if the current behavior is working as designed (in v3).
Thanks!

[etimberg]

@stockiNail from a visual perspective, the v2 chart looks more correct IMO.