Chartjs-ChartJS autoskip:False not working on line chart

by

0👍

✅

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 class="chartCard">
    <div class="chartBox">
      <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>

-1👍

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 class="chartCard">
      <div class="chartBox">
        <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>

Leave a comment