TanStack/react-charts

Bar graph does not display properly if there is only one data in it

SharathAlur opened this issue · 3 comments

If we have only one data to display in the graph then the graph does not display the bar at all.
Here is the demo:
https://codesandbox.io/s/sharp-meadow-jtiy1

The way I was able to work around this issue was by explicitly setting a min and max value on the secondary axis. If you don't, the library seems to be trying to figure out the min and max values on its own, and by having a single value the bar is so small you can't see it (min = max = your value).

@Meryovi could you provide a snippet?

I tried your suggestion but it doesn't work

@martialanouman

Assuming your secondary axis looks like this:

const secondaryAxes = React.useMemo(
    () => [
      {
        getValue: (datum) => datum.secondary
      }
    ],
    []
  );

You can change it into something like this:

const secondaryAxes = React.useMemo(
    () => [
      {
        getValue: (datum) => datum.secondary,
        min: 0 // This is the trick
      }
    ],
    []
  );

Where min is the lowest possible value you expect for that axis (for example, 0).

Based on the OP question you would end up with something like this:
https://codesandbox.io/s/black-architecture-kn42jx?file=/src/components/Bar.tsx