score:0

using a scatter chart is a good choice. the solution however depends on the format of your data. let's presume, it looks like this:

const data = [
  { name: 'rachel', calls: ['2021-03-01 10:15', '2021-03-01 18:02', '2021-03-02 06:48'] },
  { name: 'william', calls: ['2021-03-01 13:24', '2021-03-02 08:41', '2021-03-02 11:13'] },
  { name: 'barbara', calls: ['2021-03-01 07:58', '2021-03-01 15:47', '2021-03-02 10:16'] }
];   

you need to create a dataset for each user and provide the data in point format where the values of distinct users are different but all values of a same user are identical. this can be done using the array.map() method as follows:

data.map((user, i) => ({ 
  label: user.name,
  data: user.calls.map(call => ({ x: call, y: i + 1 }))
}))

now you also need to define a ticks.callback function on the y-axis that transforms the numeric tick value back to the user name

yaxes: [{
  ticks: {
    ...
    callback: v => v % 1 == 0 ? data[v - 1].name : undefined
  }
}],

please take a look at below runnable code and see how it works.

const data = [
  { name: 'rachel', calls: ['2021-03-01 10:15', '2021-03-01 18:02', '2021-03-02 06:48'] },
  { name: 'william', calls: ['2021-03-01 13:24', '2021-03-02 08:41', '2021-03-02 11:13'] },
  { name: 'barbara', calls: ['2021-03-01 07:58', '2021-03-01 15:47', '2021-03-02 10:16'] }
];
const colors = ['red', 'blue', 'green'];

new chart('mychart', {
  type: 'scatter',
  data: {
    datasets: data.map((user, i) => ({ 
      label: user.name,
      data: user.calls.map(call => ({ x: call, y: i + 1 })),
      backgroundcolor: colors[i],
      pointradius: 4
    }))
  },
  options: {
    responsive: true,
    tooltips: {
      callbacks: {
        title: tooltipitem => data[tooltipitem[0].datasetindex].name,
        label: tooltipitem => tooltipitem.xlabel
      }
    },
    scales: {   
      yaxes: [{
        ticks: {
          min: 0.5,
          max: data.length + 0.5,
          stepsize: 0.5,
          callback: v => v % 1 == 0 ? data[v - 1].name : undefined
        }
      }],
      xaxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          displayformats: {
            hour: 'mmm-dd hh'
          },
          tooltipformat: 'mmm-dd hh:mm'
        },
        gridlines: {
          linewidth: 0
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.bundle.min.js"></script>
<canvas id="mychart" height="80"></canvas>


Related Query

More Query from same tag