ChartJS autoskip:False not working on line chart-CodePudding

I have a line chart created using ChartJs. I have added a AutoSkip: false in the Y-axis under scales in my javascript as I want to show every single dates from the labels on Y-axis but some of my dates are being skipped.

The dates start from 2022-02-25 and ends at 2022-05-06. But the Y-axis is skipping some of the dates. I do not want that. I want every single dates to be displayed. Can anyone tell me what's wrong with my code?

Below is the sample of my codes:

// setup 
    const data = {
      datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
    ]
    };
    // config 
    const config = {
      type: 'line',
      data,
      options: {
        indexAxis: 'y',
        scales: {
          x: {
            beginAtZero: true
          },
          y:{
            reverse: true,
            type: 'time',
            ticks: {
              autoSkip: false
            }
          }
        }
      }
    };

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

      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartCard {
        width: 100vw;
        height: 100vh;
        background: rgba(255, 26, 104, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 1200px;
        padding: 50px;
        border-radius: 20px;
        border: solid 3px rgba(255, 26, 104, 1);
        background: white;
      }
      @media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Line Chart</title>
  </head>
  <body>
    <div >
      <div >
        <canvas id="myChart" style="position: relative;"></canvas>
      </div>
    </div>
    <script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

CodePudding user response：

The time scale by default generates nice ticks because time can be verry far appart. If you want to show all the ticks you will need to set the source in the ticks to 'data'. After that the autoskip property will work.

scales: {
  y: {
    type: 'time',
    ticks: {
      source: 'data',
      autoSkip: false
    }
  }
}

Live example:

// setup 
const data = {
  datasets: [{
    label: 'PZ-1',
    data: [{
      y: '2022-02-25',
      x: 40.551
    }, {
      y: '2022-03-01',
      x: 35.889
    }, {
      y: '2022-03-02',
      x: 34.68
    }, {
      y: '2022-03-03',
      x: 33.182
    }, {
      y: '2022-03-04',
      x: 30.82
    }, {
      y: '2022-03-05',
      x: 29.864
    }, {
      y: '2022-03-08',
      x: 28.413
    }, {
      y: '2022-03-10',
      x: 28.413
    }, {
      y: '2022-03-12',
      x: 28.424
    }, {
      y: '2022-03-15',
      x: 25.578
    }, {
      y: '2022-03-17',
      x: 27.07
    }, {
      y: '2022-03-19',
      x: 27.42
    }, {
      y: '2022-03-22',
      x: 27.478
    }, {
      y: '2022-03-24',
      x: 22.817
    }, {
      y: '2022-03-26',
      x: 22.576
    }, {
      y: '2022-03-29',
      x: 22.326
    }, {
      y: '2022-03-31',
      x: 22.011
    }, {
      y: '2022-04-02',
      x: 21.672
    }, {
      y: '2022-04-05',
      x: 21.561
    }, {
      y: '2022-04-07',
      x: 21.307
    }, {
      y: '2022-04-09',
      x: 34.988
    }, {
      y: '2022-04-12',
      x: 28.89
    }, {
      y: '2022-04-14',
      x: 28.618
    }, {
      y: '2022-04-17',
      x: 28.862
    }, {
      y: '2022-04-19',
      x: 27.727
    }, {
      y: '2022-04-21',
      x: 27.493
    }, {
      y: '2022-04-23',
      x: 27.149
    }, {
      y: '2022-04-26',
      x: 25.862
    }, {
      y: '2022-04-28',
      x: 25.59
    }, {
      y: '2022-04-30',
      x: 25.37
    }, {
      y: '2022-05-04',
      x: 24.79
    }, {
      y: '2022-05-06',
      x: 24.927
    }],
    backgroundColor: '#FFD700',
    borderColor: '#FFD700',
    borderWidth: 1
  }]
};
// config 
const config = {
  type: 'line',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true
      },
      y: {
        reverse: true,
        type: 'time',
        ticks: {
          autoSkip: false,
          source: 'data'
        }
      }
    }
  }
};

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

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.chartCard {
  width: 100vw;
  height: 100vh;
  background: rgba(255, 26, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chartBox {
  width: 1200px;
  padding: 50px;
  border-radius: 20px;
  border: solid 3px rgba(255, 26, 104, 1);
  background: white;
}

@media only screen and (min-width: 1600px) {
  .chartBox {
    width: 1600px;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Line Chart</title>
</head>

<body>
  <div >
    <div >
      <canvas id="myChart" style="position: relative;"></canvas>
    </div>
  </div>
  <script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

CodePudding user response：

You must set a height, otherwise it will adjust to the height available and show only some Y-data.

// setup 
    const data = {
      datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
    ]
    };
    // config 
    const config = {
      type: 'line',
      data,
      options: {
        indexAxis: 'y',
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: {
            beginAtZero: true
          },
          y:{            
            reverse: true,
            type: 'time',
            ticks: {
              autoSkip: false
            }
          }
        }
      }
    };

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

* {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartCard {
        overflow:auto;
        background: rgba(255, 26, 104, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        
        padding: 50px;        
        border-radius: 20px;
        border: solid 3px rgba(255, 26, 104, 1);
        background: white;
      }
      @media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>F3 Peizometer</title>
  </head>
  <body>
    <div >
      <div >
        <canvas id="myChart" style="position: relative;height:900px;width:400px"></canvas>
      </div>
    </div>
    <script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>