ChartJS Horizontal bars barely visible with 50 records on the Y axis

Question

Is there a way to set the vertical thickness of the horizontal bars in ChartJS(3.7.0). Or change the zoom level or something?

I have a recordset with 50 rows which should show 50 horizontal bars. However when the chart is rendered. The lines representing the horizontal bars are barely visible.

I am using this config:

        const config = {
          type: 'bar',
          data: chart_data,
          options: {
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    barThickness: 20,  // number (pixels) or 'flex'
                    maxBarThickness: 22 // number (pixels)
                }]
            },
            indexAxis: 'y',
            plugins: {
              legend: {
                position: 'right',
              },
            }
          }
        };

I am also setting the bar and max thickness in each dataset as well. Also set the height of the parent <div> which houses the <canvas> tag to a large value 3200px.

Thanks

Answer 1

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>