[Chartjs]-I am using chart.js I sent my time values throw my api as timestamp know i need to show them in the chart as date format

by

1👍

✅

You need to define your xAxis as a time cartesian axis with a unit that matches your data. The default display format of ‘hour’ is ‘hA’ (for instance ‘2PM’). You should probably also use the same format for displaying tooltips.

xAxes: [{
  type: 'time',
  time: {
    unit: 'hour',
    tooltipFormat: 'hA' 
  }
}],

Please note that Chart.js uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.

Please have a look at belo runnable code snippet.

const labels = [1585725538000, 1585729616000, 1585742414000, 1585812498000, 1585842536000, 1585918521000, 1585938665000, 1585948685000];
const datas = [15, 16, 15, 17, 12, 13, 11, 12];

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: '# temperature',
      data: datas,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          tooltipFormat: 'hA' 
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart" height="90"></canvas>

Leave a comment