Formatting Chart with Chart.js and ng2-charts (angular)

Question

Buckle up this one will take you on a journey. I have a data set of activity levels every hour for a business during business hours, shown below. The object keys are the UTC timestamps every hour, and their corresponding values are the activity level out of 1. Business hours are 9-5 M-F, which is the range shown below.

const dataSet = {
1594072800000: 0.3210144927536232
1594076400000: 0.2753623188405797,
1594080000000: 0.30362318840579705,
1594083600000: 0.17463768115942027,
1594087200000: 0.2108695652173913,
1594144800000: 0.04057971014492754,
1594148400000: 0.26231884057971017,
1594152000000: 0.39202898550724635,
1594155600000: 0.2673913043478261,
1594159200000: 0.2246376811594203,
1594162800000: 0.2492753623188406,
1594166400000: 0.3101449275362319,
1594170000000: 0.28478260869565214,
1594173600000: 0.28840579710144926,
1594231200000: 0.12101449275362319,
1594234800000: 0.2594202898550725,
1594238400000: 0.23260869565217393,
1594242000000: 0.2673913043478261,
1594245600000: 0.25217391304347825,
1594249200000: 0.2681159420289855,
1594252800000: 0.263768115942029,
1594256400000: 0.21159420289855072,
1594260000000: 0.24710144927536232,
1594317600000: 0.08478260869565218,
1594321200000: 0.2927536231884058,
1594324800000: 0.3695652173913044,
1594328400000: 0.3782608695652174,
1594332000000: 0.3710144927536232,
1594335600000: 0.43623188405797103,
1594339200000: 0.47536231884057967,
1594342800000: 0.41521739130434787,
1594346400000: 0.36231884057971014,
1594404000000: 0.15579710144927536,
1594407600000: 0.2311594202898551,
1594411200000: 0.2876811594202898,
1594414800000: 0.2920289855072464,
1594418400000: 0.24710144927536232,
1594422000000: 0.2318840579710145,
1594425600000: 0.21884057971014492
}

My options object looks like this:

this.lineChartOptions = {
      title: {
        display: true,
        text: this.t['space.Utilization_Trends'],
      },
      animation: {
        duration: 1000,
        easing: 'easeOutCirc',
      },
      scales: {
        xAxes: [{
          ticks: {
            maxTicksLimit: 5,
          },
          gridLines: {
            drawOnChartArea: false,
          },
        }],
        yAxes: [{
          id: 'utilization-axis',
          type: 'linear',
          position: 'left',
          ticks: {
            beginAtZero: true,
            callback: function(value: string) {
              return `${value}%`;
            },
            stepSize: 25,
            min: 0,
            max: 100,
          },
        }],
      },
    };

The labels array is basically the array of keys from dataSet, and the dataSets object is basically the array of values from dataSet.

When I graph them using ng2-charts, I get something like this:

Since the labels object I give to ng2-Charts has all the times shown in the dataset, I've limited them by setting scales.xAxis[0].ticks.maxTicksLimit = 5 but they are not spaced out how I want. I want to line them up to where each day starts, (where the line dips towards the bottom).

So that is my first question, can I manipulate the labels so I can only show one per day, and line it up to the beginning of the day?

Secondly, it would also be nice to put in a vertical line or bar between the start/end of each day. I tried drawing grid lines, but they need to be regularly spaced. My date range starts in the middle of the first day so that spacing does not stay regular.