Problem adding name to X-axis for a chart

Question

I'm trying to set the name to my X axis but it is not showing up on the chart. I want to add the title in the X-axis of the chart to represent the calls received on the chart

import React from 'react';

import { Card, CardHeader, Divider } from '@mui/material';
import { Bar } from 'react-chartjs-2';

import '../styles.css';

function Calls() {
    const data = {
        labels: [
            'FollowUp',
            'Already Purchased',
            'Customer Picked Up',
            'Auto Wrap Up',
            'Language Barrier',
            'Commercial Vehicle',
            'Car Not Finalized',
        ],
        datasets: [
            {
                label: 'Data',
                data: [650, 438, 578, 377, 100, 30, 0],
                fill: true,
                backgroundColor: 'rgba(0, 0, 183,1)',
            },
        ],
    };
    return (
        <div className='chart-cardLayout'>
            <Card className='chart-card'>
                <CardHeader title='Disposition Code Mix' className='chart-cardHeader' />
                <Divider />
                <div>
                    <Bar data={data} options={{ indexAxis: 'y' }} />
                </div>
            </Card>
        </div>
    );
}

export default Calls;

I have tried these in the options but is not able to show the axis name on the chart. I'm trying the react-chartjs-2 library to represent the chart

    scales: {
                                x: [
                                    {
                                        title: {
                                            display: true,
                                            text: 'No. of Calls',
                                        },
                                    },
                                ],
                            },

==================================

title: {
                                    display: true,
                                    text: 'No. of Calls',
                                },

==========================================

scales: {
                xAxes: [
                    {
                        scaleLabel: {
                            display: true,
                            labelString: 'NumberofCalls',
                        },
                    },
                ],
                            

Answer 1

This is because you are trying to use V2 syntax in V3, in V3 all scales have been changed to objects instead of arrays so you will need to put it like this:

options: {
  scales: {
    x: {
      title: {
        display: true,
        text: 'Number of calls'
      }
    }
  }
}