In Chart, Setting minimum chart height when data values are all zero

[joffreypersia]

Hi,

I have a chart that displays visits to my app. The problem is that when a user has no visits during a time range, the chart height becomes null.

I'd like to set a minimum height for the chart even when there's no data - specifically showing a y-axis that goes from 0 to 1, while keeping the line at 0.

I've found these two possible solutions in Chart.js:

vs

In ChartJS there is :

options: {
  scales: {
    y: {
      afterDataLimits: (scale) => {
        // Add exactly 1 to the max value
        scale.max += 1;
      }
    }
  }
}

Or using the grace parameter combined with min:

javascriptCopyoptions: {
  scales: {
    y: {
      min: 0,
      grace: 1
    }
  }
}

Has anyone implemented something like this? Which approach would be better for ensuring the chart always shows at least some height (0 to 1 range) even with zero values?

Thank you

[jeffchown]

@joffreypersia Have you tried determining the dataset's max y, before rendering the chart, and if it's zero, explicitly setting the tick-end to 1? - see https://fluxui.dev/components/chart#tick-formatting

[joffreypersia]

Hi @jeffchown,

Unfortunately, this setting does a weird thing if the data has non-zero values in some cases.

So I need to conditionally check if the retrieved data has all values at 0, and if so, add a tick-end of 1 in PHP.

I don't think this is a good practice. I would prefer to simply add "+1" to the maximum y-values displayed, for example.

[jeffchown]

Isn't that essentially what I was suggesting? (For the edge case where all values are 0s). To cover all bases you could set tick-end to max($values)+1 per your comment.

[joffreypersia]

Hi @jeffchown,

Yes, that’s exactly what you were saying. I think I expressed myself poorly since English is not my first language.

I did this and it worked:

<flux:chart.axis axis="y" tick-end="{{ $maxY === 0 ? '1' : 'max' }}">...</flux:chart.axis>

But this snippet doesn't work as expected if I just write (and add on the class above $maxY = $maxY + 1):

:tick-end="$maxY"

With this syntax, even if maxY changed, the chart doesn't refresh correctly the y axis. It keeps the old first value.

But it’s not as convenient as what I originally meant. In Chart.js, for example, you can simply add a property that increases the max value by 1, rather than having to conditionally check if maxY is 0 and apply different logic.

The issue is that tick-end acts as a limiter. Maybe something more flexible—like separate properties such as tick-end-min and tick-end-max—could help. Alternatively, an "offset-y" option set to 1 could solve the problem in a cleaner way.

Thanks to your input, I found a workaround, but it still feels more like a patch than a proper solution.