1

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

barely visible horizontal bars

Dan
  • 2,209
  • 3
  • 23
  • 44

1 Answers1

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>
uminder
  • 23,831
  • 5
  • 37
  • 72
  • this helped me get to my issue, when i was populating the x and y values in the data section of the data-set, the values were going in as strings, once i cast them to ints, the problem disappeared, along with not passing in the labels values separately as well. my chart looks good not, thanks. – Dan Jan 24 '22 at 15:07