Mantine LineChart提示框样式异常及图表显示问题求助

1. 修复样式缺失（含Tooltip透明问题） #

Mantine Charts组件需要单独导入样式文件，否则会丢失默认样式（包括Tooltip的白色背景、边框、阴影等）。在项目入口文件（如main.tsx/App.tsx）中添加：

import '@mantine/charts/styles.css';

2. 修正轴标签格式（时间类型） #

你的dataKey是timestamp（时间戳），组件默认不会自动格式化时间，需给x轴配置tickFormatter转换为可读格式：

import { format } from 'date-fns'; // 需先执行 npm install date-fns 安装依赖

<LineChart
  // ...其他属性
  xAxis={{
    tickFormatter: (value) => format(new Date(value), 'MM/dd HH:mm'), // 自定义时间格式
  }}
/>

3. 解决最右侧数据点截断问题 #

通过chartPadding属性给图表右侧预留空间，避免数据点被容器边缘截断：

<LineChart
  // ...其他属性
  chartPadding={{ right: 20 }} // 右侧预留20px空间，可按需调整数值
/>

完整修复后代码示例 #

import { LineChart } from '@mantine/charts';
import { format } from 'date-fns';
import '@mantine/charts/styles.css'; // 必须导入样式

const trends = [
  // 示例数据结构
  { timestamp: 1699123200000, "Route A": 50, "Route B": 30, "Loop de Loop": 70 },
  { timestamp: 1699209600000, "Route A": 60, "Route B": 45, "Loop de Loop": 65 },
  // ...更多数据
];

export function TrendChart() {
  return (
    <LineChart
      m="md"
      h={300}
      data={trends}
      dataKey="timestamp"
      curveType="linear"
      series={[
        { name: "Route A", color: "blue" },
        { name: "Route B", color: "red" },
        { name: "Loop de Loop", color: "green" },
      ]}
      xAxis={{
        tickFormatter: (value) => format(new Date(value), 'MM/dd HH:mm'),
      }}
      chartPadding={{ right: 20 }}
    />
  );
}

内容的提问来源于stack exchange，提问作者faetoy