Guh I solved it, sorry about the question. But I guess I’ll leave an answer in case anyone else runs into my problem.
var ctx = document.getElementById("barChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["label 1", "label 2"],
datasets: [{
label: "My Label",
backgroundColor: "rgba(159,170,174,0.8)",
borderWidth: 1,
hoverBackgroundColor: "rgba(232,105,90,0.8)",
hoverBorderColor: "orange",
scaleStepWidth: 1,
data: [4, 5]
}]
},
options: {
legend: {
labels: {
fontColor: "blue",
fontSize: 18
}
},
scales: {
yAxes: [{
ticks: {
fontColor: "green",
fontSize: 18,
stepSize: 1,
beginAtZero: true
}
}],
xAxes: [{
ticks: {
fontColor: "purple",
fontSize: 14,
stepSize: 1,
beginAtZero: true
}
}]
}
}
});
<!-- Edit:
chart.js recently released new version v3.x
which is not backwards compatible with v2.x
-->
<!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
<!-- above link gets you latest version of chart.js (at v3.3.2 now)
hence snippet didn't work propperly anymore :-(
-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>
<!-- above link gets you v2.9.4
and snippet works agian :-)
-->
<div>
<canvas id="barChart" height="140"></canvas>
</div>