score:3
if you want the labels to be retained for the tooltip, but not displayed below the bars the following hack might be useful. i made this change for use on an private intranet application and have not tested it for efficiency or side-effects, but it did what i needed.
at about line 71 in chart.js add a property to hide the bar labels:
// boolean - whether to show x-axis labels
barshowlabels: true,
at about line 1500 use that property to suppress changing this.endpoint (it seems that other portions of the calculation code are needed as chunks of the chart disappeared or were rendered incorrectly if i disabled anything more than this line).
if (this.xlabelrotation > 0) {
if (this.ctx.barshowlabels) {
this.endpoint -= math.sin(toradians(this.xlabelrotation)) * originallabelwidth + 3;
} else {
// don't change this.endpoint
}
}
at about line 1644 use the property to suppress the label rendering:
if (ctx.barshowlabels) {
ctx.filltext(label, 0, 0);
}
i'd like to make this change to the chart.js source but aren't that familiar with git and don't have the time to test rigorously so would rather avoid breaking anything.
score:3
score:6
inspired by christutty's answer, here is a solution that modifies the source but has not been tested thoroughly. i haven't had any issues yet though.
in the defaults section, add this line around line 71:
// boolean - omit x-axis labels
omitxlabels: true,
then around line 2215, add this in the buildscale method:
//if omitting x labels, replace labels with empty strings
if(chart.defaults.global.omitxlabels){
var newlabels=[];
for(var i=0;i<labels.length;i++){
newlabels.push('');
}
labels=newlabels;
}
this preserves the tool tips also.
score:7
for those whom this did not work, here is how i hid the labels on the x-axis-
options: {
maintainaspectratio: false,
layout: {
padding: {
left: 1,
right: 2,
top: 2,
bottom: 0,
},
},
scales: {
xaxes: [
{
time: {
unit: 'areas',
},
gridlines: {
display: false,
drawborder: false,
},
ticks: {
maxtickslimit: 7,
display: false, //this removed the labels on the x-axis
},
'dataset.maxbarthickness': 5,
},
],
score:8
faced this issue of removing the labels in chartjs now. looks like the documentation is improved. http://www.chartjs.org/docs/#getting-started-global-chart-configuration
chart.defaults.global.legend.display = false;
this global settings prevents legends from being shown in all charts. since this was enough for me, i used it. i am not sure to how to avoid legends for individual charts.
score:11
var linechartdata = {
labels: ["", "", "", "", "", "", ""] // to hide horizontal labels
,datasets : [
{
label: "my first dataset",
fillcolor : "rgba(220,220,220,0.2)",
strokecolor : "rgba(220,220,220,1)",
pointcolor : "rgba(220,220,220,1)",
pointstrokecolor : "#fff",
pointhighlightfill : "#fff",
pointhighlightstroke : "rgba(220,220,220,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
}
window.onload = function(){
var options = {
scaleshowlabels : false // to hide vertical lables
};
var ctx = document.getelementbyid("canvas1").getcontext("2d");
window.myline = new chart(ctx).line(linechartdata, options);
}
score:18
(this question is a duplicate of in chart.js, is it possible to hide x-axis label/text of bar chart if accessing from mobile?) they added the option, 2.1.4 (and maybe a little earlier) has it
var mylinechart = new chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xaxes: [{
ticks: {
display: false
}
}]
}
}
}
score:19
this is for chart.js ^3.0.0
remove x-axis labels and grid chart lines
var chart = new chart(ctx, {
...
options:{
scales:{
x: {
display: false
}
}
}
});
remove only x-axis labels
var chart = new chart(ctx, {
...
options: {
scales: {
x: {
ticks: {
display: false
}
}
}
}
});
score:163
update chart.js 2.1 and above
var chart = new chart(ctx, {
...
options:{
scales:{
xaxes: [{
display: false //this will remove all the x-axis grid lines
}]
}
}
});
var chart = new chart(ctx, {
...
options: {
scales: {
xaxes: [{
ticks: {
display: false //this will remove only the label
}
}]
}
}
});
reference: chart.js documentation
old answer (written when the current version was 1.0 beta) just for reference below:
to avoid displaying labels in chart.js
you have to set scaleshowlabels : false
and also avoid to pass the labels
:
<script>
var options = {
...
scaleshowlabels : false
};
var linechartdata = {
//comment this line to avoid displaying the labels
//labels : ["1","2","3","4","5","6","7"],
...
}
...
</script>
Source: stackoverflow.com
Related Query
- Chart Js change text label orientation on Ox axis
- Chart Js reduce text size for label on X axis
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- show label in tooltip but not in x axis for chartjs line chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- Adding custom text to Bar Chart label values using Chart.js
- How to Remove axis Lines from chart in chart js
- how to label axis within radar chart with chart.js
- display vertical axis label in line chart using chart.js
- How to stop axis label from being cut off in chart JS?
- Remove label from line chart - react-chartjs-2
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- Chart.js how to remove final label on chart
- show text in both y axis in dual axis chart js
- Changing Chart.js chart type doesn't remove older axis
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How to change text colour of specific labels of axis in Chart JS?
- How to remove a label in top of bar in chartjs chart
- How to remove the extra Y axis from a bar chart in chart.js
- Move chart x axis label and borders
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- remove undefined label in the upper part of a chart
- Chart JS - How to display Label over Slices instead of text on hover
- Chart.js - How to Add Text in the label of the Chart with JavaScript?
- How to add text inside the doughnut chart using Chart.js?
- In Chart.js set chart title, name of x axis and y axis?
- Chart Js Change Label orientation on x-Axis for Line Charts
- Remove the vertical line in the chart js line chart
More Query from same tag
- chartjs-vue charts are empty
- Adding labels and colours to Chart.JS from arrays
- Tooltip alignement with Chart.js v2
- Responsive Chart.js Doughnut Chart with minimum height
- Dynamically Creating Json Array Javascript
- Chart.JS custom y axis labels with text that has value
- Align a data label below a point on a bubble graph (Chart.JS)
- Extension for chart.js 2.X
- $scope.chart undefined in angular-chart
- Add DataSet Bar Chart - Chart.JS
- Center origin of a Scatter Chart
- How to use Chart.js to draw mixed Financial / Candlestick and Bar Chart?
- I have a setInterval function that graphs.
- Chart.js only draws when I go through debug on Chrome
- How do I manipulate a specific tooltip value of a Chart.js pie chart?
- How to make a interactive legend with chartjs
- ng2-charts access base chart object
- How to get chartjs column chart in ng-repeat
- charts disappear if rendered in hidden divs
- Issues with Moment and ChartJS Time Format Parsing
- JavaScript. Trying to simplify code, maybe with loops?
- Impossible to render multiple charts with chart.js
- Uncaught (in promise) TypeError: Cannot read property 'length' of undefined in chartjs with Vuejs
- Adding hours and minutes to a date object for time axis
- ChartJS creating var takes each character and outputs undefined
- react-chartjs-2 keep x axis always 0% to 100%
- Custom Tooltips On Line Chart Using Chart.js
- Chart.js with plotting durations against dates
- Custom labeling/fixed range on x-axis in Chart.js for horizontal bar chart?
- Add Text to Doughnut Chart - ChartJS