score:1

Accepted answer

you can add a second x axis that shows the date and empty labels for the other spaces, then you can use null values in your data array to make the data points appear in the right spots.

example:

<!doctype html>
<html>

<head>
  <!-- required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>chart.js mixed chart</title>
  <!--chart.js js cdn-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
</head>

<body>

  <div>
    <canvas id="mychart"></canvas>
  </div>

  <script>
    var ctx = document.getelementbyid('mychart').getcontext('2d');
    var mychart = new chart(ctx, {
      type: 'line',
      data: {
        labels: ["pm", "am", "night", "pm", "am", "night"],
        datasets: [{
            data: [null, 49, null, null, 51],
            label: "am",
            bordercolor: "#3e95cd",
            backgroundcolor: "rgb(62,149,205)",
            borderwidth: 2,
            type: 'line',
            fill: false,
            showline: false
          }, {
            data: [47, null, null, 48],
            label: "pm",
            bordercolor: "#3cba9f",
            backgroundcolor: "#3cba9f",
            borderwidth: 2,
            showline: false
          }, {
            data: [null, null, 50, null, null, 52],
            label: "night",
            bordercolor: "#ffa500",
            backgroundcolor: "#ffa500",
            borderwidth: 2,
            showline: false
          }

        ]
      },
      options: {
        scales: {
          xaxes: [{},
            {
              id: 'dates',
              type: 'category',
              position: 'bottom',
              labels: ["", "05/05/2021", "", "", "06/05/2021", ""]
            }
          ]
        }
      }

    });
  </script>

</body>

</html>

fiddle: https://jsfiddle.net/leelenaleee/4tx2swmr/1/


Related Query

More Query from same tag