101π
To hide just the labels, in version 2.3.0 of Charts.js, you disable ticks
like so:
options: {
scales: {
yAxes: [{
ticks: {
display: false
}
}]
}
}
28π
For version 2, you can do this with the Scales option in the global configuration.
var ctx = document.getElementById("log");
var chart = new Chart(ctx, {
type: 'line',
options: {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}],
}
},
data: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [{
fill: false,
borderWidth: 1,
data: [10, 20, 30]
}]
}
});
19π
For version 3.x
options: {
scales: {
y: {
ticks: {
display: false,
}
}
}
}
This will hide the y labels.
- [Chartjs]-ChartJS Line Charts β remove color underneath lines
- [Chartjs]-Hide/disable tooltips chart.js
13π
This will hide labels in Y-Axis: (but not X-Axis)
scaleShowLabels: false,
- [Chartjs]-Charts.js Formatting Y Axis with both Currency and Thousands Separator
- [Chartjs]-Chart.js load totally new data
10π
options: {
scales: {
yAxes: [{
gridLines: {
display: true,
color: 'rgba(219,219,219,0.3)',
zeroLineColor: 'rgba(219,219,219,0.3)',
drawBorder: false, // <---
lineWidth: 27,
zeroLineWidth: 1
},
ticks: {
beginAtZero: true,
display: true
}
}]
}
}
5π
Chart.defaults.scale.ticks.display = false;
4π
Solved it with overriding y-axis labels width
Chart.Scale.prototype.buildYLabels = function () {
this.yLabelWidth = 0;
};
- [Chartjs]-ChartJS Line Charts β remove color underneath lines
- [Chartjs]-Chart.js axes label font size
3π
try this one
var statDat = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "rgba(255, 152, 0, 0.30)",
strokeColor: "#f26b5f",
pointColor: "#f26b5f",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#00fff5",
pointStrokeColor: "#f26b5f",
data: [203, 156, 99, 251, 305, 247]
}
]
};
var stats = document.getElementById('stats').getContext('2d');
var options = {
scaleShowLabels: false
};
new Chart(stats).Line(statDat, options);
2π
if you are using 3.3.2
Y axis will be hidden by this:
options:
{
scales: {
yAxis: {
display: false,
}
}
},
2π
This should remove all text(legends and labels) and all gridlines:
const chartOptions = {
responsive: true,
plugins: {
legend: {
display: false,
},
// title: {
// display: true,
// text: "Chart",
// },
},
scales: {
x: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
y: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
},
};
- [Chartjs]-Chart.js β Formatting Y axis
- [Chartjs]-How to clear a chart from a canvas so that hover events cannot be triggered?
1π
This worked for me with Chartjs v2.4.0
The idea is to set backDropColor to full transparent. 255,255,255 is white, but 0 sets it to transparent.
Then the userCallback returns always an emptry string.
The end result is hidden y-axis labels.
ticks: {
backdropColor : "rgba(255,255,255,0)",
userCallback: function(value, index, values) {
return "";
}
}
0π
options: {
scales: {
yAxes: [{
ticks: {
display: false
}
}]
}
}
Source:stackexchange.com