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
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