Scaling issue with y-axis

[alexkuc]

I am having a difficulty with automatic scaling:

As you can see, the chart is "cutting" into the top.

Here is my config:

class BarChartFactory {
  create = (id, labels, datasets) => {
    return new Chart(document.getElementById(id).getContext("2d"), {
      type: "bar",
      data: {
        labels: labels,
        datasets: datasets,
      },
      plugins: [ChartDataLabels],
      options: {
        scales: {
          y: {
            type: "linear",
            beginAtZero: true,
            scaleLabel: {
              display: true,
              labelString: "text",
            },
          },
          y2: {
            type: "linear",
            beginAtZero: true,
            position: "right",
            scaleLabel: {
              display: true,
              labelString: "text",
            },
            gridLines: {
              drawOnChartArea: false,
            },
          },
          x: {
            type: "time",
            ticks: {
              source: "labels",
              autoSkip: false,
            },
            adapters: {
              date: {
                locale: locale,
              },
            },
          },
        },
        plugins: {
          legend: {
            position: "bottom",
          },
          datalabels: {
            backgroundColor: function (context) {
              let color = context.dataset.backgroundColor;
              color = color.replace(/[^,]+(?=\))/, "1");
              return color;
            },
            formatter: function (value, context) {
              return value + "%";
            },
            display: false,
            borderRadius: 25,
            color: "white",
            font: {
              weight: "bold",
            },
            padding: 6,
          },
        },
      },
    });
  };
}

I am using v3 (3.0.0-beta.10).

I know that I can manually supply either suggestedMax or max values to the scale.

However, I wanted to double check if chart.js offers some other setting or option which I could try?

Ps. I filled this issue as help requested instead of bug, as I am not sure whether this is a bug or a misconfiguration

[LeeLenaleee]

Try adding some padding to the top of the chart so that it has canvas left to draw on as seen in this example (https://codepen.io/leelenaleee/pen/NWbxjKO) if you remove the layout -> padding option you will see the circle gets cut off

[alexkuc]

Just as I have realized the issue is padding, I have noticed your comment too 😅 Looking at the docs, I am trying to figure out what unit this value uses? Is it pixels?

The example shown in the docs uses pixels. I have tried other units like em and % but it did not work, so I assume it is pixels?

[etimberg]

Yes, the padding is in pixels. em should be possible, and % might be possible depending on exactly when the calculation happens