Option to use time scales

[kepano]

Describe the feature

Allow axes to use the time scale to set relative distance between points in time

Does this fix a problem? If so, specify.

Currently this is possible using dataviewjs however the input is less user-friendly, and doesn't support new capabilities like table based charts introduced in 3.3.0

Did you consider other alternatives?

The following examples show the same input data with very different output visualization. The second one is much more useful, but less user friendly to create and keep up to date with new data.

Using table charts

  ```chart  
  type: line
  id: chart
  layout: colums
  beginAtZero: true```

  | Date       | Number |
  | ---------- | ------ |
  | 2022-02-21 | 1052   |
  | 2022-02-13 | 1020   |
  | 2022-02-05 | 945    |
  | 2022-01-20 | 847    |
  | 2022-01-11 | 801    |
  ^chart

With dataviewjs

dataviewjs

const chartData = {
    type: 'line',
    data: {
        labels: ['2022-01-11','2022-01-20','2022-02-05','2022-02-13','2022-02-21'],
        datasets: [{
            label: 'Number',
            data: [801,847,945,1020,1052]
        }]
    },
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'day'
                }
            }
        }
    }
}

window.renderChart(chartData, this.container);

[phibr0]

https://charts.phibr0.de/modifiers/#time-modifier

[kepano]

Amazing! Works perfectly.

[claremacrae]

Amazing! Works perfectly.

Please could you say how exactly you used it? I've read that page and do not understand where to put the modifier...

[claremacrae]

Amazing! Works perfectly.

Please could you say how exactly you used it? I've read that page and do not understand where to put the modifier...

I figured it out... The answer for me was to insert:

time: "day"

Like this:

```chart
type: line
labels: [2022-06-15, 2022-06-22, 2022-06-23]
time: "day"
series:
  - title: Stuff
    data: [75818, 80000, 90000]
tension: 0.2
width: 80%
labelColors: false
fill: false
beginAtZero: false