I have a line chart in Chartjs. I want to be able to remove the x-axis and y-axis data from visibilty so it only shows the line.
Below is the codepen that I am working with.
The code I have is the below.
<html>
<style>
body{
background:none;
}
canvas {
background-color: white;
color:black;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{
gridLines: {
display: false
},
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
}
});
</script>
</body>
</html>
ticks: { display: false } will take care of that.
scales: {
xAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
},
}],
yAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
}
}],
}