Datalabels plugin chartjs showing '[object]' instead of value

Question

I am passing object from app.js file and stringify-ing it, but it's not correctly working in datalabels, and showing [object as shown in image

Here is my code: [it's in ejs, but is almost same as js except passing variable as <%-variable%>, instead of ${}]

app.js

let bubbleData=[];

let dataObj = {
                "pastObservation": [
                                {
                                    "value": "400",
                                    "observation_time": "2021-08-12"
                                },
                                {
                                    "value": "800",
                                    "observation_time": "2021-08-13"
                                },
                                {
                                    "value": "13",
                                    "observation_time": "2021-08-11"
                                },
                                {
                                    "value": "370",
                                    "observation_time": "2021-08-15"
                                }
};

//parsing data from observation time, and value, and pushing them in array

dataObj.pastObservation.map( value => { console.log( value.value, value.observation_time ); let object={ "x": value.value, "y": JSON.stringify( Date.parse( value.observation_time ) ) }; bubbleData.push( object ); } );


app.get( '/one', function ( req, res ) {
    res.render( 'chartOne', { bubbleData: bubbleData } );
} );

My ejs file, although I am stringifying the labels passed, still datalabels plugin is taking them as object, instead of strigyfied values :

<canvas id="LineChart" height="100"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"
    integrity="sha512-asxKqQghC1oBShyhiBwA+YgotaSYKxGP1rcSYTDrB0U6DxwlJjU59B67U8+5/++uFjcuVM8Hh5cokLjZlhm3Vg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

<script>
    var ctx=document.getElementById( 'LineChart' );
    var myChart=new Chart( ctx, {
        type: 'bubble',
        data: {
            datasets: [ {
                label: 'First Dataset',
                data: <%- JSON.stringify( bubbleData )%>,
                backgroundColor: 'rgb(255, 99, 132)',
                radius: 15,
            } ],
        },
        plugins: [ ChartDataLabels ],
        options: {
            plugins: {
                datalabels: {
                    color: 'black',
                    font: {
                        weight: 'bold'
                    },
                },
            },
            scales:
            {
                y: {
                    ticks: { // return data in date format, instead of numeric as date parsed
                        callback: ( value ) => { return new Date( value).toLocaleDateString( "en-US", { day: "2-digit", month: "short" } ); }

                    }
                }
            },
        },
    } );

Answer 1

I was able to figure this out, instead of displaying the whole value, which in the current case was an object, I had to use formatter with a callback function fetching value of x, in the plugins option.

options: {
            plugins: {
                datalabels: {
                    formatter: ( val ) => {
                        return val.x
                    },
                 }
             }
    }