Chart.js showing x-axis ticks even though set to false - chart.js

Question

New coder and trying to get a Chart.js to work.
https://codepen.io/phillyg/pen/PojMQLp
options: {
responsive: true,
legend: {
display: false,
},
scales: {
yAxes: [
{
ticks: {
fontColor: "rgba(255, 255, 255, 1)",
},
gridLines: {
display: false,
},
},
],
xAxes: [
{
ticks: {
fontColor: "rgba(255, 255, 255, 1)",
display: false,
},
gridLines: {
color: "rgba(255, 255, 255, .2)",
borderDash: [5, 5],
zeroLineColor: "rgba(255, 255, 255, .2)",
zeroLineBorderDash: [5, 5],
},
},
],
},
},
I have set the options.scales[xAxes].ticks.display to false.
Any help?

Answer 1

you have a problem with your spelling .. It should be Axis not Axes
there is no need for square brackets: xAxes: [
I have cleaned up spare commas -- While they don't "hurt" the JS, they are unnecessary.
const prices = [
[1483315200000, 1019.1988000000001],
[1483401600000, 1035.5313],
[1483488000000, 1130.8495163207272],
[1483574400000, 990.6674999999997],
[1483660800000, 894.0325],
[1483747200000, 900.0787999999999],
[1483833600000, 908.0850000000004],
[1483920000000, 901.8788880390637],
];
const labels = prices.map((el, i) => new Date(el[0]).toLocaleDateString());
const data = {
labels: labels,
datasets: [
{
data: prices.map((el) => el[1]),
borderColor: "rgb(0, 0, 0)",
pointBackgroundColor: "rgba(255, 255, 255, 1)",
},
],
};
const config = {
type: "line",
data: data,
options: {
responsive: true,
legend: {
display: false,
},
scales: {
yAxis:
{
ticks: {
fontColor: "rgba(255, 255, 255, 1)"
},
gridLines: {
display: false
},
},
xAxis:
{
ticks: {
display: false
},
gridLines: {
color: "rgba(255, 255, 255, .2)",
borderDash: [5, 5],
zeroLineColor: "rgba(255, 255, 255, .2)",
zeroLineBorderDash: [5, 5]
}
}
}
}
};
var myChart = new Chart(document.getElementById("myChart"), config);
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.5.1/dist/chart.min.js"></script>
<script src="chart_data.js" defer></script>