React-chartjs-2: Bar chart 5 columns issue and label font size

[LuizMoreira]

Hi,

I'm trying to configure a Bar chart with 5 columns and looks like a label on the left side is overlaping a label on the right side, because of it's size. I'm also trying to configure the label size to a smaller value, to solve this overlaping issue, but the configuration is not working when the graphic is rendered.

As you can see here , the first column is "Reclamação" is overlaping the second column "Elogio" (you can see that the vertical lines are not there as well)

When I change the text on the database, removing a single character, it fits on the column and everything is rendered fine.

Here is the code, I'm trying to solve reducing the size of all labels (no effect).

   const optionsBar = { 
title: {
                 display: true,
                 text: "Quantitativo por natureza"
             },
             legend: {
                 display: false,
                 labels: {
                     fontColor: "#000000",
                     fontSize: 8
                 }
             maintainAspectRatio: true
         };
         graficoBar = (
                <Bar 
                    data={dataBar}
                    onElementsClick={this.getNatureza}
                    options={optionsBar}
                 />
        )

I see no problem when I have 6 or more columns, only on this size and only with 5 columns.

[Edit]

Just to add another information, while testing, I concatenated a single character, space, after each label and now it is rendered fine.

[LuizMoreira]

up

[LuizMoreira]

This is the configuration that worked for now. I don't know if there is a better way to correct this.

scales: { xAxes: [{ ticks: { autoSkip: false, padding: 10 } }]},

[Pringels]

Closing for now. Please refer to the Chart.js documentation for questions around configuration and/or usage of the library. If you have a bug or enhancement related directly to Chart.js, please open an issue on their Github.