Hide grids in Bar Graph

Question

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} />;
}

In the above code All the code inside scales is not having any effect. I want to hide grids from my chart.

I want to also add some features to my chart but anything I add to this code having no effect in the results.

Instead of full grids I want dotted grid only parallel to x axis. I also want to add different colors to all the bars.

Answer 1

You have putted your scale condif in the plugins section of the options object. This is incorrect, you need to place the scales section in the root of the options object. Then it will work fine.

So instead of options.plugins.scales.x and options.plugins.scales.y you will get: options.scales.x and options.scales.y