[Chartjs]-ChartJS Horizontal bars barely visible with 50 records on the Y axis

by

2👍

✅

Without seeing more of your code, it’s almost impossible to find out, why the thickness of the bars in your chart is not what you expect.

The following points however are worth knowing when working with Chart.js v3:

  • scales.[x/y]Axes.barThickness was moved to dataset option barThickness
  • scales.[x/y]Axes.maxBarThickness was moved to dataset
    option maxBarThickness

More details can be found in the 3.x Migration Guide or in the Chart.js v3 documentation here.

Please take a look at below runnable script and see how it could be done in your case.

const data = [...Array(50)].map(e => ~~(Math.random() * 20 + 1));
const colors = ['255, 99, 132', '54, 162, 235', '255, 206, 86', '231, 233, 237', '75, 192, 192',   '151, 187, 205', '220, 220, 220', '247, 70, 74', '70, 191, 189', '253, 180, 92', '148, 159, 177', '77, 83, 96'];

new Chart('chart', {
  type: 'bar',
  plugins: [{
    beforeLayout: chart => chart.options.scales.y1.labels = chart.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
  }],
  data: {
    datasets: data.map((v, i) => ({
      label: i + 1,
      data: [{ x: v, y: i }],
      backgroundColor: 'rgba(' + colors[i % colors.length] + ', 0.4)',
      borderColor: 'rgb(' + colors[i % colors.length] + ')',
      borderWidth: 1,
      categoryPercentage: 1
    }))
  },
  options: {
    indexAxis: 'y',    
    plugins: {
      legend: {
        position: 'right',
      },
      tooltip: {
        callbacks: {
          title: () => undefined
        }
      }
    },
    scales: {
      y: {
      },
      y1: {
        offset: true,
        gridLines: {
          display: false
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="chart" height="600"></canvas>

Leave a comment