[Chartjs]-Chartjs backdropcolor of y scale ticks not showing

by

1👍

✅

Well for your first part of your question I have no solution. (it might be possible if you write a plugin or so, but no out-of-the-box solution, that I know of)

For part two "the grey box", check the demo below.
In short you will have to set the parameter showLabelBackdrop to true.

Here a demo, how I would do this:

let labels = ['Short Label', 'vryshrtlbl', 'a litle bit more longer label', 'pretty veeeeeeeeeeeeeeeeeeeeeerylong label', 'ultra extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemly long label']

const data = {
  labels: labels,
  datasets: [
    {
      label: 'Losers',
      data: [-1,-2,-3,-44,-5],
      backgroundColor: 'rgba(255, 0, 0, 0.5)',
    },
    {
      label: 'Winners',
      data: [6,12,23,55,5],
      backgroundColor: 'rgba(255, 0, 0, 1)',
    }
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },
    responsive: true,
    indexAxis: 'y',
    scales: {
      x: {
        stacked: true,
        title: {
          display: true,
          text: 'x-axis description',
        },
      },
      y: {
        ticks: {
          mirror: true,
          backdropColor: '#cdcdcd',
          backdropPadding: 0, // <- Adjust the box padding
          showLabelBackdrop: true,
          z: 1,
        },
        stacked: true,
        title: {
          display: true,
          text: 'y-axis description',
        },
      }
    }
  }
};
new Chart(
    document.getElementById('chart'),
    config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  

<div class="chart" style="height:300px; width:500px;">
    <canvas  id="chart" ></canvas>
</div>

Leave a comment