score:1

Accepted answer

you can use the min and max properties on the x axis like so:

const chart = new chart('chartjscontainer', {
  type: "line",
  data: {
    labels: [
      new date(1634847780000), // last of previous day - low tide
      new date(1634869320000), // high tide 1
      new date(1634891880000), // low tide 1
      new date(1634913060000), // high tide 2
      new date(1634935560000), // low tide 2
      new date(1634955720000), // first of next day - high tide
    ],
    datasets: [{
      label: "my first dataset",
      data: [0.7, 5.8, 0.8, 5.8, 0.8, 5.1], // meters above sea
      tension: 0.5,
      backgroundcolor: "#000000",
      fill: {
        target: "origin",
      },
    }, ],
  },
  options: {
    interaction: {
      mode: "point",
    },
    hover: {
      mode: "point",
    },
    onhover: (e) => {
      const canvasposition = getrelativeposition(e, chart);

      // substitute the appropriate scale ids
      const datax = chart.scales.x.getvalueforpixel(canvasposition.x);
      const datay = chart.scales.y.getvalueforpixel(canvasposition.y);
      console.log(datay);
    },
    plugins: {
      tooltip: {
        enabled: true,
      },
      legend: {
        display: false,
      },
    },
    scales: {
      xaxis: {
        type: "time",
        min: new date(1634853600000), // should calculate this dynamic, not best way but can use: new date().sethours(0,0,0,0)
        max: new date(1634939999000), // should calculate this dynamic, not best way but can use: new date().sethours(23,59,59)
        time: {
          unit: "hour",
          displayformats: {
            hour: "hh:mm",
          },

          // minunit: moment(1634860800000).format("hh:mm"),
        },
      },
      yaxis: {
        ticks: {
          callback: function(value, index, values) {
            return value + "m";
          },
        },
      },
    },
  },
});
<body>
  <canvas id="chartjscontainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</body>


Related Query

More Query from same tag