How to increase bar thickness in Chart.js?

Question

I am using Chart.js in React and would like the bars on my chart to be thicker without piling up. Next is my component rendering the graph:

import React from 'react';
import { HorizontalBar } from 'react-chartjs-2';
import './teste.css'

const BarChart = () => {
    return (
        <div className="caps">
            <HorizontalBar 
                data = {{
                    labels: [
                        'Direito', 'Engenharia Civil', 'Ciência da Computação',
                        'Engenharia Elétrica', 'Geografia', 'Ciências Biológicas',
                        'Nutrição', 'Farmácia', 'Enfermagem', 'Matemática', 'História',
                        'Medicina', 'Design', 'Química', 'Administração',
                        'Engenharia de Petróleo', 'Arte e Mídia', 'Letras', 'Estatística',
                        'Engenharia Ambiental', 'Psicologia', 'Engenharia de Alimentos',
                        'Engenharia Mecânica', 'Física', 'Filosofia', 'Engenharia Florestal',
                        'Engenharia Agrícola', 'Engenharia Química', 'Engenharia de Produção',
                        'Pedagogia', 'Ciências Sociais', 'Arquitetura e Urbanismo', 'Agronomia',
                        'Odontologia', 'Meteorologia', 'Medicina Veterinária',
                        'Ciências Econômicas', 'Engenharia de Minas', 'Engenharia de Materiais',
                        'Engenharia de Biotecnologia e Bioprocessos', 'Ciências Contábeis',
                        'Gestão Pública', 'Engenharia de Biossistemas', 'Comunicação Social'
                ],

                    datasets: [
                        {
                            label: "Quantidade",
                            data: [
                                138, 128, 114, 112, 99, 92, 90, 82, 73, 71, 66, 63, 53, 46,
                                38, 37, 34, 25, 25, 25, 24, 24, 12, 10, 9, 8, 8, 7, 7, 6, 5,
                                5, 5, 4, 4, 4, 3, 2, 2, 2, 2, 1, 1, 1
                            ],
                            backgroundColor: '#EEAD2D',
                            barThickness: 'flex',
                        },
                    ],

            
                }}
                height = {1000}
                width = {400}
                options = {{
                    maintainAspectRatio: false,

                    layout: {
                        padding: 60,
                    },

                    legend: {
                        display: true,
                    },

                    title: {
                        display: true,
                        padding: 10,
                        text: "Nº de Respondentes",
                        fontSize: 25,
                    },

                    scales: {
                        yAxes:[
                            {
                                gridLines: {
                                    color: "rgba(0, 0, 0, 0)",
                                },

                                ticks: {
                                    beginAtZero: true
                                },
                            },
                        ],

                        xAxes:[
                            {
                                display: false,
                                gridLines: {
                                    color: "rgba(0,0,0,0)",
                                },
                            }
                        ],

                    },

                }}
            />
        </div>
    )
};

export default BarChart;

Notice that the property barThickness, inside datasets, is with the value flex. By changing this value to 40, for example, note that the bars thicken, but pile up on each other. How to make the bars thicker without overlapping?

Answer 1

Hello.

To modify the thickness of the bars, you may be using the barPercentage. It already delivers by default the thickness .9. It’ll stay that way:

scales: {
   yAxes:[
      {
         barPercentage: .2,
         gridLines: {
            color: "rgba(0, 0, 0, 0)",
         },
         ticks: {
            beginAtZero: true
         },
      },
   ],
   xAxes:[
      {
         display: false,
         gridLines: {
            color: "rgba(0,0,0,0)",
         },
      }
   ],
},

If you want to then give an improved spacing between categories, you can simply increase the height of the graph, in height. barPercentage will always take into account the chart size.

One more addendum: you can use the categoryPercentage, which defines the size that the bar occupies in the category, and barPercentage will occupy that space. That is, if you define barPercentage: . 5 and the categoryPercentage: 1, the bar will be half the size defined by categoryPercentage. And in the case of barPercentage: 1, will occupy the space defined by the categoryPercentage. Just remembering again, these options already come with a default value. Here is the link to the documentation.

Follow an example applied in mine Codesandbox.

I hope I helped you ;D