Расстояние между буквами и высота строки меток данных в диаграмме JS

Question

Я работаю с диаграммой. js, чтобы отображать гистограммы в отчетах. Мне удалось успешно интегрировать его в свое приложение rails, и гистограммы работают нормально.

Для отображения меток данных я использовал этот плагин, который, кажется, тоже работает нормально.

Проблема, с которой я столкнулся сейчас, - это стилизация меток. Я успешно могу изменить цвет и шрифт этикеток, но не могу изменить расстояние между буквами. Мне кажется, этикетки выглядят немного тесными и вытянутыми по вертикали, а расстояние между буквами могло бы улучшить вид. Я приложил диаграмму JS код и снимок экрана ниже.

Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';
Chart.defaults.global.legend.display = false;

// Chart.defaults.global.tooltipenabled = false;
$('.bar-chart-basic').each(function (i,obj) 
{
  var ctx = this.getContext('2d');
  var gradient = ctx.createLinearGradient(0, 0, 0, 100);
  gradient.addColorStop(1, '#76ddfb');
  gradient.addColorStop(0, '#2471a2');
  var x_values = JSON.parse(obj.dataset.x_axis)
  var y_values = JSON.parse(obj.dataset.y_axis)
  var data = {
      labels: x_values,
      datasets: [{
          data: y_values,
          backgroundColor: gradient,
          display: false,
          scaleLabel: ""
      }]
  }
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: data,
      responsive:true,
      maintainAspectRatio: false,
      datalabels: {
        display:false
      },
      legend:{
            display: false,
                         labels: {
                fontSize: 0
            }
          },
      options: {
          hover: { mode: null,animationDuration:0 },
          tooltips: {enabled: false },
          layout: {
              padding: {
                  left: 0,
                  right: 0,
                  top: 18,
                  bottom: 0
              }
          },
          plugins: {
            datalabels: 
            {
              align: function()
              {
                return 'end';
              },
              anchor: 'end',
              color: function() {
                return 'slategrey';
              },
               font: {
                  size: 8.5
              },
              opacity: 1,
              formatter: function(value, context) {
                div_id =  context.chart.canvas.id;
                var y_labels = JSON.parse(context.chart.canvas.dataset.labels)
                display_text = y_labels[context.dataIndex]
                return display_text
              }
            } 
          },
          scales: {
              yAxes: [{
                  display: false,
                  gridLines: {
                      display:false,
                      color: '#6c757d'
                  },
                  ticks: {

                      // max: Math.max.apply(Math,data.datasets[0].data.map(function(x) {return Math.abs(x)}))*2.5,
                      beginAtZero: true

                  } 
              }],
              xAxes: [{
                  barPercentage: 1.0,
                  barThickness:20,
                  gridLines: {
                      display: false,
                      drawBorder: false
                  },
                  ticks: {
                      fontSize: 8 ,
                      fontStyle: "bold",
                      fontColor: "slategrey"
                  }
              }]
          }
      }
});
});

Рад дать больше ясности.

ОБНОВЛЕНИЕ

С помощью комментария Джоэла Хагера удалось добавить межстрочный интервал, отредактировав холст css. Но по-прежнему не удается обновить высоту строки метки