chartJs-line-dates

by kleky

HTML

<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="1000" height="1000"></canvas>

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['2020-01-01', '2020-01-07', '2020-01-14', '2020-01-21', '2020-01-28',
        '2020-02-04', '2020-02-11'],//  7, 14, 21, 35, 42, 49, 56, 63, 70, 77, 84, 91, 98, 105, 119, 126],
        datasets: [{
            label: 'IC',
            data: [
            9432.13209267,
            1899.132847,
            851.2122668,
            3964.48968367,
            9433,
            8087.04121533,
            1268.34642367],
            borderWidth: 1
        },
        {
            label: 'Mtb',
            data: [14241.41334667,
            48348.08833,
            5055.28134533,
            7614.80689233,
            14240,24536.66203,
            1083.99264,
            144.72451603],
            borderWidth: 1
        }]
    },
    options: {
       scales: {
         xAxes: [ 
         {
           display: true,
           type: 'time',
           time: {
             unit: 'day',
             unitStepSize: 20,
             displayFormats: {
               day: 'MMM D'
             },
           },
           ticks: {
           callback(value, index, values) {
                  console.log(value + ' ' + index);
    				},
           },
           position: 'bottom',
           scaleLabel: {
             display: true,
             labelString: 'Days from initial test',
             fontSize: 16
           }
         }],
         yAxes: [{
            display: true,
            position: 'left',
            ticks: {
              beginAtZero: true,
              stepSize: 10000,
              min: 0,
              max: 70000
            },
            scaleLabel: {
              display: true,
              fontSize: 16
            }
          },
          {
            display: true,
            position: 'right',
            ticks: {
              beginAtZero: true,
              stepSize: 10000,
              min: 0,
     ...