How to display multiple X-axis values with two bars like attached image

Question

Angular 14+

chart plugin : PrimeNG

I'm using primeng along with Angular 14 to show bar chart/graph. In the below code, I want to display on X axies like attached image. please let me know. As of now bar is looking like this.

HTML

<p-chart type="bar" [data]="basicData" [options]="basicOptions" width="100%" height="230px"></p-chart>

Ts file chart configuration

 this.basicOptions = {

        padding: 0,
        plugins: {
          legend: {
            labels: {
              color: '#495057',
             
            }
          },
        },
        scales: {

          x: {
            min: 0,
            max: 20,
            padding: 0,
            grid: {
              display: false,
            },
            title: {
              display: true,
              text: 'Time (s)'
            }
          },
          y: {
            min: 0,
            max: 12,
            padding: 0,
            grid: {
              display: true,
            },
            title: {
              display: true,
              text: 'Flow Rate (ml/s)'
            }
          }
        },
      };