Im creating dashboards and tremor is doing things pretty well. I just cant seem to fix this issue of y-axis range. See below. The tooltip shows there were 22 sales on Friday, not 12.
I dont see anything in the documentation that lets me set the yaxis range. I can set width and height and I tried those but nothing changes and my data is hidden. I can only guess it must be a styling issue. Y-axis range min ~1000, max ~26000. I have less data at the moment.
function ChartView({ netSalesReport, daySalesReport, hourSalesReport, orderAmountReport }) {
return (
<>
<Card marginTop="mt-6">
<Title>Net Sales Report</Title>
<AreaChart
data={netSalesReport}
dataKey="date"
categories={["Total Amount"]}
colors={["indigo"]}
showLegend={false}
valueFormatter={numberFormatter}
height="h-72"
marginTop="mt-8"
/>
</Card>
<ColGrid numColsMd={1} numColsLg={3} marginTop="mt-0" gapX="gap-x-6" gapY="gap-y-6">
<Card marginTop="mt-6">
<Title>Net Sales By Day</Title>
<BarChart
data={daySalesReport}
dataKey="day"
categories={["count"]}
colors={["blue"]}
showLegend={false}
valueFormatter={numberFormatter}
marginTop="mt-6"
yAxisWidth="w-12"
/>
</Card>
<Card marginTop="mt-6">
<Title>Net Sales By Hour</Title>
<BarChart
data={hourSalesReport}
dataKey="hour"
categories={["count"]}
colors={["blue"]}
showLegend={false}
valueFormatter={numberFormatter}
marginTop="mt-6"
yAxisWidth="w-12"
/>
</Card>
<Card marginTop="mt-6">
<Title>Order Amount</Title>
<BarChart
data={orderAmountReport}
dataKey="Amount"
categories={["count"]}
colors={["blue"]}
showLegend={false}
valueFormatter={numberFormatter}
marginTop="mt-6"
yAxisWidth="w-12"
/>
</Card>
</ColGrid>
</>
);
}
