ChartJS柱状图双轴线隐藏失败及轴线显示异常问题求助

我来帮你定位并解决这个问题，你的代码里有两个关键问题导致配置不生效：

问题根源 #

1. 轴配置格式错误：你把scales.x和scales.y写成了数组[{...}]，但Chart.js的scales配置要求每个轴是一个对象而非数组，数组格式的配置会被框架忽略，这就是你的设置没生效的核心原因。
2. 轴线隐藏的配置项不对：你只设置了grid.drawBorder，但X轴的基线（底部水平线）属于轴的border属性，而非网格线的配置，需要单独控制。

修正后的配置方案 #

下面是修改后的option配置，我会逐一解释关键改动：

const option = {
 scales: {
  x: {
   // 隐藏X轴的基线（底部水平线）
   border: { display: false },
   // 隐藏X轴的刻度标签（如果不需要的话）
   ticks: { display: false },
   // 完全隐藏X轴网格线
   grid: {
    display: false,
    drawBorder: false,
    drawOnChartArea: false
   }
  },
  y: {
   // 隐藏Y轴的左侧竖线
   border: { display: false },
   // 隐藏Y轴的刻度标签（如果不需要的话）
   ticks: { display: false },
   // 完全隐藏Y轴网格线
   grid: {
    display: false,
    drawBorder: false,
    drawOnChartArea: false
   }
  }
 },
 maintainAspectRatio: true
}

关键改动说明 #

• 把数组改为对象：将scales.x和scales.y从数组[{...}]改为对象{...}，确保配置被Chart.js正确读取。
• border.display: false：这是隐藏轴的轴线（X轴基线、Y轴竖线）的核心配置，直接控制轴本身的边框显示。
• grid.display: false：彻底关闭网格线的显示，比单独设置drawOnChartArea更简洁。
• ticks.display: false：如果不需要轴上的刻度标签，可以加上这个配置（可选，根据你的需求调整）。

替换后的完整代码 #

把你的option变量替换成上面的配置后，完整代码如下：

/** @type {import("@theme-ui/css").Theme} */
import { Box, Container } from '@theme-ui/components'
import React from 'react'
import { Bar } from 'react-chartjs-2'

const data = {
 labels: ['Mon', 'Tue', 'Wed', 'Fri', 'Sat'],
 datasets: [
 { 
 label: 'Fully Rounded', 
 data: [6, 2, 3, 5, 2], 
 borderWidth: 0, 
 borderRadius: 9, 
 borderSkipped: false, 
 display: false, 
 borderColor: 'transparent', 
 backgroundColor: "#FF8D1E", 
 },
 { 
 label: 'Small Radius', 
 data: [3, 2, 6, 4, 5], 
 borderWidth: 0, 
 borderRadius: 9, 
 borderSkipped: false, 
 display: false, 
 borderColor: 'transparent', 
 backgroundColor: '#6AC1FF', 
 color: 'rgba(0, 0, 0, 0.1)', 
 }
 ]
};

const option = {
 scales: {
  x: {
   border: { display: false },
   ticks: { display: false },
   grid: {
    display: false,
    drawBorder: false,
    drawOnChartArea: false
   }
  },
  y: {
   border: { display: false },
   ticks: { display: false },
   grid: {
    display: false,
    drawBorder: false,
    drawOnChartArea: false
   }
  }
 },
 maintainAspectRatio: true
}

function Charts() {
 return (
 <Container sx={styles.container}>
 <h2>Number of Patients</h2>
 <Box sx={styles.chart}>
 <Bar data={data} width={40} height={20} options={option} />
 </Box>
 </Container>
 )
}

export default Charts;

const styles = {
 container: { p: "12px" },
 chart: { bg: "#605BFF", borderRadius: "27px", p: ["20px"], color: "red" }
}

这样修改后，X轴的基线和Y轴的竖线都会被隐藏，配置也能正常生效了。

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