title: Chart.JS Starting at 00:00am and ending at 23:59pm
body: <p>I need a bit of advice here.</p>
  <p>I have the following chart:</p>
  <p><a href="https://i.stack.imgur.com/EjjSW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EjjSW.png" alt="enter image description here" /></a></p>
  <p>I would like to start the chart XAxis at 00:00 and end at 23.59, but I still have to plot the last point of the previous day and first of the next day (so that the line/curve continues off), but not extend the chart view to include these points. I have drawn lines onto where I would like the chart to start and finish.</p>
  <p>Anyone have any idea how I can achieve this? It is a daily tide chart, so only needs to show the curve of a single day.</p>
  <p>Here is the code I currently have:</p>
  <pre><code>const chart = new Chart(this.$refs.myChart, {
                  type: &quot;line&quot;,
                  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: &quot;My First dataset&quot;,
                              data: [0.7, 5.8, 0.8, 5.8, 0.8, 5.1], // Meters above sea
                              tension: 0.5,
                              backgroundColor: &quot;#000000&quot;,
                              fill: {
                                  target: &quot;origin&quot;,
                              },
                          },
                      ],
                  },
                  options: {
                      interaction: {
                          mode: &quot;point&quot;,
                      },
                      hover: {
                          mode: &quot;point&quot;,
                      },
                      onHover: (e) =&gt; {
                          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: &quot;time&quot;,
                              time: {
                                  unit: &quot;hour&quot;,
                                  displayFormats: {
                                      hour: &quot;HH:mm&quot;,
                                  },
  
                                  // minUnit: moment(1634860800000).format(&quot;HH:mm&quot;),
                              },
                          },
                          yAxis: {
                              ticks: {
                                  callback: function(value, index, values) {
                                      return value + &quot;m&quot;;
                                  },
                              },
                          },
                      },
                  },
              });
  </code></pre>
  <p>Thanks in advance!</p>