How to create a chart for showing sigma value like this

I need to create a stacked bar chart to show Six Sigma value as shown in the image

enter image description here

Here the values in the Y axis are static. But the values in the X axis are not evenly spaced. The image is not properly designed. I am attaching a picture to illustrate the values of the X axis according to the value of the bars. In the picture the yield column corresponds to the values on the bars.
enter image description here
Also I need to show the values on the bar as shown in the image.
I have tried to use chartjs 2 but I can not figure out how to make a custom spacing scale for the X axis.

My attempt at modifying the X axis ticks is given below

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      yAxisID: 'yAxis'
    }]
  },
  options: {
    scales: {
      xAxis: {
        type: 'logarithmic',
        position: 'right',
      }
    }
  }
});

Any recommendations other than chartjs for this functionality would also be highly appreciated