I am collecting data from an API.

Comes in JSON format:

[{'time':'08h00','magnitude':25, 'temper':12.6},{'time':'09h00','magnitude':39, 'temper': 5.3}]

Making my chart:

const ctx = document.getElementById('chart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: "Line Graph",
                data: [],
                parsing: {
                    xAxisKey: 'time',
                    yAxisKey: 'temper'
                },
                borderColor: function(context) {
                    var index = context.dataIndex;
                    var value = context.dataset.data[index];
                    console.log(value);
                    return value > 10 ? 'red' : 'green';
                },
                
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'day',
                    },
                },
            },
            responsive: 'true',
        }
    });

Then I populate it:

function addData(chart, data) {
    for (x in data) {
        chart.data.datasets[0].data.push(data[x]);
    }
    chart.update();
}

$.getJSON("https://8.0.0.85/last_48_hours", function (data) {
        addData(chart, data)
    });

My issue is with this, which comes right out of the docs:

 borderColor: function(context) {
                    var index = context.dataIndex;
                    var value = context.dataset.data[index];
                    console.log(value);
                    return value > 10 ? 'red' : 'green';
                },

because value is the whole Object {'time':'08h00','magnitude':25, 'temper':12.6}

var value = context.dataset.data[index].temper; and var value = context.dataset.data[index]['temper'];

and all manner of do not work. How can I reference value['temper']?