Blurry X Axis Labels

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

var chartOptions = {
    animationEnabled: true,
    animationDuration: 500,
    data: [
    		{
            type: "line",
            lineDashType: "solid",
            lineThickness: 1,
            dataPoints: [
                {
                    x: new Date("2023-03-03T21:35:49.009Z"),
                    y: 35
                },
                {
                    x: new Date("2023-03-10T21:35:49.009Z"),
                    y: 40
                }
            ],
        } 
    ],
};
 
var chart1 = new CanvasJS.Chart("chartContainer1", chartOptions);
chart1.render();
chartOptions.animationEnabled = false;
var chart2 = new CanvasJS.Chart("chartContainer2", chartOptions);
chart2.render();
/* setTimeout(() => { chart.render()}, chartOptions.animationDuration); */