Chart area higher than it needs to be (extra padding on top)

[stephansteiner]

Description

I'm trying to create a stacked bar chart with most functionality like yaxis labels, data hover etc. being disabled.
However, the chart area occupies more space in height than it needs to have, there is an extra padding on top. In the SVG, I see that the svg part of apexcharts-graphical is translated to the right and from the top.
If I want to show the graph in a very tight layout constraint I will have to translate the chart back to negative y.
Is there a way to display the stacked chart area on the top left corner?

Steps to Reproduce

1. Run the code codepen example on https://codepen.io/stephansteiner/pen/zxvEMrJ
2. See the red border
3. There is extra padding on top of the chart, making it difficult to align in a layout

Expected Behavior

Since y axis and all visible interaction is disabled by options, the chart should be aligned on the top.

Actual Behavior

The chart is centered horizontally (I can live with that), but there is some extra padding on top.

Screenshots

https://prnt.sc/MGLg6uPJoInq

Reproduction Link

Codepen example: https://codepen.io/stephansteiner/pen/zxvEMrJ

[rosco54]

Not sure if this will be helpful but I'm assuming you're referring to the extra space that is part of the chart area due to the auto scaling of the y-axis. If the grid lines and axis labels are turned on we see that the maximum y-axis value has been computed to be 150 in order to produce nice y-axis intervals and labels, in this case 0, 50, 100, 150, to accommodate the maximum stacked column of just over 100. This leaves a third of the vertical chart area clear.

If you want the bars to fill more of the vertical space then you could constrain the auto scaling "algorithm", in this case by specifying a y-axis "stepSize: 10". The algorithm will then effectively, in the absence of further constraints, choose a maximum y-axis height to the nearest multiple of 10 greater than the maximum stacked bar height (110 in this case). The bars will then scale to fill most of the vertical chart area.

You could also choose "stepSize: 1" but for large ranges of Y values this may cause issues internally with large arrays etc. It will be better if the stepSize value in this case is between 1% to 10% of the expected stacked bar maximum. If you add "forceNiceScale: true" (default is false) to the y-axis block it will tell the algorithm to be smarter and not literal about how it interprets the stepSize value. Specifically it will multiply or divide the stepSize value by a number of orders of magnitude so that it better matches the magnitude of the maximum y value in the chart. For example, if your max y value was 101,000 a "stepSize: 1" might be scaled to become 1000 or 10000.

Adding those two options to your y-axis block:

yaxis: {
    stepSize: 1,
    forceNiceScale: true,
    floating: true,
    axisTicks: {
      show: false
    },
    axisBorder: {
      show: false
    },
    labels: {
      show: false
    }
  },

PS.
The reason it chose to use just three tick values [plus the baseline] is due to the vertical size of the chart, that is, to avoid overcrowding the labels. If the chart height was greater, say 300 or more, it would compute more ticks and smaller intervals, and thus the bars would fill more of the chart area.

PPS.
Effectively, when "forceNiceScale: true", only the most significant digit of the stepSize value becomes meaningful to the algorithm when computing axis tick labels. You might use "stepSize: 2" in this case to compute tick labels that are multiples of 2 or 20 or 20000 or 0.002, "stepSize: 5" for tick labels that are multiples of 5 or 50 or 50000 or 0.005.

PPPS.
As far as I'm aware the online documentation has never been updated to reflect the changes to the y-axis auto scaling that were introduced between v3.6 and 3.8 of ApexCharts, so this would only be known through trial and error and some astute observation of the effects.