React中Chart.js柱状图网格配置失效及样式定制需求

问题根源 #

你代码里的scales配置完全不生效，核心原因是把scales错误嵌套在了plugins对象里——Chart.js的scales是options的直接子属性，不属于plugins范畴，所以之前的网格隐藏配置根本没被框架读取。

修复后完整代码 #

import React from 'react';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
);

const options = {
    responsive: true,
    elements: {
        bar: {
            borderWidth: 2,
        },
    },
    // 关键：scales是options的直接子属性，不是plugins的子属性
    scales: {
        x: {
            grid: {
                display: false // 隐藏X轴方向的网格线
            }
        },
        y: {
            grid: {
                display: true, // 保留Y轴方向的网格线（平行于X轴）
                borderDash: [5, 5], // 设置虚线样式：线段长度5，间隔5
                color: '#ccc' // 网格线颜色，可自定义
            }
        },
    },
    plugins: {
        legend: {
            display: false,
        },
        title: {
            display: false,
        },
    },
};

const labels = ["a", "b", "c", "d0", "d", "e", "t"];
const v = [8, 10, 15, 2, 4, 11, 17];
// 自定义每个柱子的颜色，数组长度和数据一致
const barColors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF'];

const data = {
    labels,
    datasets: [
        {
            label: "Total no of errors",
            data: v,
            backgroundColor: barColors, // 用颜色数组替代单一颜色
        }
    ],
};

export default function App() {
    return <Bar options={options} data={data} />;
}

关键修改说明 #

1. 修正scales位置：把scales从plugins里移到options根节点，这是配置生效的核心前提
2. 实现平行X轴的虚线网格：
   • 隐藏X轴网格（x.grid.display: false），保留Y轴网格（y.grid.display: true）——Y轴的网格线就是平行于X轴的
   • 用borderDash: [5,5]设置虚线样式，数组里的两个值分别代表线段长度和间隔长度，可按需调整
3. 每个柱子单独设置颜色：把backgroundColor从单一字符串改成颜色数组，数组元素数量和数据v的长度一致，每个元素对应一个柱子的颜色

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