React Chart Js 2 , x axes value not my value

i try formatting my x axis value in chart js

myData

const chartData = {
        labels: data.map(item => item.toString()),
        datasets: [
            {
                label: '',
                data: data,
                fill: true,
                borderColor: color,
                tension: 0.1,
                pointStyle: false,
                spanGaps: true,
                pointRadius: 0,
            },
        ],
    };

i use this options for my chart js line chart

add x axes config

const options = {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        scales: {
            y: {
                type: 'linear',
                min: 0,
                max: 3.64,
                ticks: {
                    stepSize: 0.91,
                    callback: (value: number) => {return `Δ ${value}`},
                }
            },
            x : { //Added
                ticks : {
                    callback : (value : number) => `${value}M`
                }
            }
        },
        plugins: {
            tooltip: {
                mode: 'index',
                intersect: false,
            },
            legend: {
                display: false,
            }
        },
        title: {
            display: false,
        }
    };

my x axis number change to index number

before

after

my chart data come from redux number array , array expand every second via interval

how i fix this ?

I fix problem with this method:

scales: {
  y: {
    beginAtZero: true,
    ticks: {
      stepSize: 0.91,
      font: {
        weight: 'bold',
        size: 16,
      },
      callback: (value) => {
        return "Δ" + Number(value).toFixed(2).toString()
      }
    },
    max: 3.64
  },
  x: {
    ticks: {
      callback(val) {
        return typeof val === 'number' ? `${this.getLabelForValue(val)}M` : '';
      }
    }
  }
},