89

How do I hide the x-axis label/text that is displayed in chart.js ?

Setting scaleShowLabels:false only removes the y-axis labels.

<script>
    var options = {
        scaleFontColor: "#fa0",
        datasetStrokeWidth: 1,
        scaleShowLabels : false,
        animation : false,
        bezierCurve : true,
        scaleStartValue: 0,
    };
    var lineChartData = {
        labels : ["1","2","3","4","5","6","7"],
        datasets : [
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [1,3,0,0,6,2,10]
            }
        ]

    }

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);

</script>
0

10 Answers 10

175

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>
11
  • 12
    please downvoter tell me how to improve my answer, thanks
    – giammin
    Jun 17, 2015 at 21:14
  • 3
    Does not work. Commenting the labels out makes the chart throw an error on update.
    – IOrlandoni
    Jun 19, 2015 at 18:57
  • @OhCaN this answer was written when the current version of chartjs was v1.0 beta i have running implementations with that code and they all work fine.
    – giammin
    Jun 22, 2015 at 8:03
  • 2
    Newer highchart version? This question is about chart.js. Not highcharts. Oct 2, 2015 at 20:43
  • 4
    If I'm right, this solution also removes the "background grid" ( I don't know the proper reference, the gray bars behind the graph ). Is there a solution that only removes the "labels" as OP requested? Sep 6, 2016 at 14:43
42

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
              }
           }
        }
    }
});
2
  • So it's like @giammin answer, but for the newer versions?
    – Anton Krug
    Apr 10, 2021 at 15:32
  • Yes, I use chart.js 3.0.2 and that works for me
    – Denismr7
    Apr 11, 2021 at 10:33
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
                }
            }]
        }
    }
}
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);

}

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.

2
  • Using Version: 2.1.6, this one did the trick. Also, without using global you could: options:{ legend: { display: false, },
    – StackUnder
    Jul 12, 2016 at 16:55
  • perfect ! that's what I am looking for. But it has to be set before the chart is rendered. Doesn't work afterwards...
    – Legends
    Jan 1, 2017 at 16:51
8

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,
        },
      ],
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.

1
  • I solved it inserting those lines BEFORE :this.buildScale(data.labels); Line: 2375. var newLabels=[]; for(var i=0;i<data.labels.length;i++){ newLabels.push(''); } Then change also with: this.buildScale(newLabels);
    – Samuele
    Feb 18, 2016 at 11:39
3

The simplest solution is:

scaleFontSize: 0

see the chart.js Document

smilar question

2
  • 1
    This would remove the y axis scale also. Nov 20, 2015 at 15:34
  • scaleFontSize is not a valid property Sep 11, 2019 at 20:31
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.

1

UPDATE: chartjs ^4.2.0 + react-chartjs-2 ^5.2.0

Axis was removed.

const options = {
legend: {
  display: false,
},
scales: {
  x: {
    display: false,
  },
  y: {
    display: false,
  },
},

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.