如何手动调整Tremor图表的Y轴范围？

问题分析 #

你遇到的问题是Tremor图表默认会根据数据集极值自动计算Y轴范围，若数据中存在异常大的数值（比如历史测试数据残留），会导致当前小量级数据被压缩，出现tooltip显示数值和图表视觉表现不符的情况。Tremor官方文档未直接暴露Y轴范围配置，但它底层基于Recharts，可通过透传配置解决。

解决方案 #

使用Tremor图表组件的chartOptions属性，传递Recharts的Y轴配置，手动指定Y轴的domain范围：

示例代码修改 #

以你的「Net Sales By Day」柱状图为例，修改后代码如下：

<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"
    // 添加Y轴范围配置
    chartOptions={{
      yAxis: {
        // Y轴从0开始，最大值取数据最大值加余量，避免柱子顶到图表边缘
        domain: [0, Math.max(...daySalesReport.map(item => item.count)) + 5]
      }
    }}
  />
</Card>

其他场景配置 #

• 若要固定Y轴范围（比如0到30），直接写死数值即可：

chartOptions={{
  yAxis: {
    domain: [0, 30]
  }
}}

• 该方法同样适用于你的AreaChart和其他BarChart组件，只需对应添加chartOptions配置。

原理说明 #

Tremor图表组件会将chartOptions中的配置透传给底层的Recharts组件，你还可以参考Recharts的YAxis配置规则，实现刻度间隔、标签格式等更多自定义需求。

内容的提问来源于stack exchange，提问作者Muhammad Mubashirullah Durrani