I have a bar chart created in chart.js and its config is below:

import Chart from 'chart.js/auto';

document.addEventListener("turbo:load", function(e) {
  let manufacturersPieChartCanvas = document.getElementById('manufacturers-pie-chart');

  if (manufacturersPieChartCanvas) {
    let labels = JSON.parse(manufacturersPieChartCanvas.dataset.manufacturers_chart_labels);
    let data = JSON.parse(manufacturersPieChartCanvas.dataset.manufacturers_chart_data);

    const config = {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          backgroundColor: ['yellow', 'red', 'green', 'blue'],
          data: data,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        categoryPercentage: 1,
        barPercentage: 0.8,
        scaleShowValues: false,
        indexAxis: 'y',
        scales: {
          yAxes: [{
            ticks: {
              autoSkip: false
            }
          }]
        }
      }
    };

    let manufacturersPieChart = new Chart(
      manufacturersPieChartCanvas,
      config
    );
  }
})

A portion of it looks like so:

I am trying to allow ALL the bar titles to show up. I have followed suggestions on SO, in regards to autoSkip false but they don't seem to have any effect. For this chart, it is imperative that all bar titles display all the time. Also, i'd prefer the height to be increased to make each bar slightly thicker. I have tried with config options and can make them thicker but the overall chart area doesn't increase to accommodate them?

Any suggestions to fix these issues?

Thanks.