See this codepen:

https://codepen.io/rblythe/pen/OJOVeXa

In chrome it renders just fine like this:

(Although it does have that weird artifact where it shows a blue line outside of the chart on the right side...not sure if that has anything to do with why it won't work in Safari)

However, in safari it won't render the line and the x-axis doesn't render either. It seems like it doesn't accept the data points.

Any ideas?

    google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization0);

function drawVisualization0() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'x');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Rating');
    data.addRow([new Date('2022-01-28 11:42:50'), null, 2]);
    data.addRow([new Date('2022-01-28 14:42:34'), null, 4]);

    var formatter = new google.visualization.DateFormat({pattern: 'yyyy-mm-dd'});
    formatter.format(data, 0);
    new google.visualization.LineChart(document.getElementById('chart0')).
    draw(data, {
        title: '',
        curveType: 'function',
        vAxis: {
            viewWindow: {min: 1, max: 6},
            textStyle:{color: '#FFFFFF'},
            gridlines: {color:"#404758"}
        },
        hAxis: {
            textStyle:{color: '#FFFFFF'},
            gridlines: {color:"#404758"}
        },
        colors: ['#ADC6FF'],
        backgroundColor: '#272930',
        gridlines: {
            color: "#404758"
        },
        baselineColor: '#404758',
        annotations: {
            style: 'line',
            color: "#FFFFFF",
            gridlines: {color:"#404758"},
            textStyle:{color: '#C4C6D0'}
        },
        chartArea: {
          // leave room for y-axis labels
          width: '94%'
        }
    });
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization1);