Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

Show Data Time in Line Chart

Open jorge2985 opened this issue 1 year ago • 0 comments

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_

jorge2985 avatar Oct 03 '23 22:10 jorge2985