chartjs / chartjs/Chart.js

Show Data Time in Line Chart

Open
#11,524 0 comments 0 reactions 0 assignees View on GitHub
type: documentation
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Documentation Is:

- [X] Missing or needed?
- [X] Confusing
- [ ] Not sure?

### Please Explain in Detail...

Good afternoon, I want to create a line chart where the dates are displayed on the **X-axis** and the hours on the **Y-axis**, but the problem is that I don't know how to do it. So far, I have the following. And there is nothing mentioned about it in the documentation.
```
const UUD = [{
x: '2023-11-07 23:39:30',
y: '2023-11-07 19:39:30'
}];
const UUM = [{
x: '2023-11-08 01:00:28',
y: '2023-11-08 09:39:30'
}];

// setup
const data1 = {
labels: fechas,
datasets: [{
label: 'Usuarios Unicos Diarios - Whatsapp',
data: UUD,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}, {
label: 'Usuarios Unicos Mensuales - Whatsapp',
data: UUM,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};

// config
const config1 = {
type: 'line',
data: data1,
options: {
//maintainAspectRatio: false,
scales: {
x: {
min: '2023-11-07 00:00:00',
},
y: {
type: 'time',
time: {
unit: 'hour'
}
}
}
}
};

// render init block
const myChart1 = new Chart(
document.getElementById('myChart1'),
config1
);

### Your Proposal for Changes

Add more examples and way to show data.

### Example

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.