如何手动调整 Tremor 图表中的 y 轴

Question

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>
    </>
  );
}

Answer 1

One needs to make sure the value being fed in data to the chart is in numeric form and not string (even though the we use formatter and return the result of that as string.

Example discussed here: https://github.com/tremorlabs/tremor/issues/247#issuecomment-1365856364