Q:

chart data on 24hr X axis using recharts, chart.js, I don't mind what

I am struggling for days now trying to figure out how to display my data on a 24hrs x axis. 
This is my data:
"glucoseMesures": [
        {
            "glucose": 85,
            "date": "2015-06-12T00:49:50+00:00"
        },
        {
            "glucose": 77,
            "date": "2015-06-12T07:09:03+00:00"
        },
        {
            "glucose": 58,
            "date": "2015-06-12T11:23:15+00:00"
        },
        {
            "glucose": 110,
            "date": "2015-06-12T16:00:58+00:00"
        },
        {
            "glucose": 97,
            "date": "2015-06-12T19:35:01+00:00"
        },
        {
            "glucose": 142,
            "date": "2015-06-12T21:15:50+00:00"
        }
    ]

I am able to plot them to Recharts and Chart.js but I cannot seem to to plot them to time order. With Recharts I was able to plot them to time order but then cannot amend the x axis labels to display this:
labels: ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "00:00"]

All I need is an X axis with the label times, then the data plotting to the Glucose time, sorry I have jsfiddle made yet. I am using react. 
What I need: 

A:

You can do this quite easily with Chart.js by using the built-in time axis.
The trick is to supply the correct configuration values to the x-axis:

unit: hour - the ticks are based on the hour.
stepSize: 3 - the ticks are shown for every third hour.
min: "2015-06-12T00:00" - the ticks start from the beginning of the day.
max: "2015-06-13T00:00" - the ticks end at the beginning of the next day.

As long as the dataset you provide is correctly sorted (in sequential datetime order) then you should get a result like in this snippet:

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    datasets: [{
      data: [{
          t: "2015-06-12T00:49:50+00:00",
          y: 85
        },
        {
          t: "2015-06-12T07:09:03+00:00",
          y: 77
        },
        {
          t: "2015-06-12T11:23:15+00:00",
          y: 58,
        },
        {
          t: "2015-06-12T16:00:58+00:00",
          y: 110
        },
        {
          t: "2015-06-12T19:35:01+00:00",
          y: 97
        },
        {
          t: "2015-06-12T21:15:50+00:00",
          y: 142
        }
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "hour",
          stepSize: 3,
          min: "2015-06-12T00:00",
          max: "2015-06-13T00:00",
          displayFormats: {
            hour: 'HH:mm'
          }
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

