'generateLabels' in chart.jsv2.9.4 is generating labels as undefined

Code link

I am not able to make the exact graph as shown in the above image. I tried both approaches; one way using 3 data with three different labels and the second way using 3 datasets.

The problem I am facing with the first method is that the generateLabels function is not working properly resulting in showing the result as undefined. I think this is because of the version but no idea how to resolve it. The labels are static so I think we can even hardcode the values.

The problem I am facing with the second method is that the x-axis is not showing the labels of the dataset correctly.

In Chart.js 2.x version, legend, title and tooltips must be defined in options node and not in plugins one.

  options: {
    ...
    legend: {
      position: 'top',
      display: true,
      labels: {
        generateLabels: function(chart) {
          let data = chart.data;
          if (data.labels.length && data.datasets.length) {
            return data.labels.map((label, i) => {
              return {
                text: label
              }
            })
          }
          return [];
        },
      }
    },
    title: {
      display: true,
      text: 'Attendees'
    },
    plugins: {
      labels: {
        render: () => {}
      }
    }
    ...
  }