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,
        },
    },
    plugins: {
        scales: {
            x: {
                grid: {
                    display: false
                }
            },
            y: {
                grid: {
                    display: false
                }
            },
        },
        legend: {
            display: false,
        },
        title: {
            display: false,
            // text: 'Top Application Accessed',
        },
    },
};

const labels = ["a", "b", "c", "d0", "d", "e", "t"];
const v = [8, 10, 15, 2, 4, 11, 17]

const data = {
    labels,
    datasets: [
        {
            label: "Total no of errors",
            data: v,
            backgroundColor: 'blue',
        }
    ],
};

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

在上面的代码中，所有的代码都没有任何效果。我想隐藏图表中的网格。
我还想添加一些功能到我的图表，但任何我添加到这个代码没有影响的结果。
而不是完整的网格，我希望虚线网格只平行于x轴。我还想添加不同的颜色，所有的酒吧。