Remove x-axis label/text in chart.js

Question

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>

giammin · Answer 1 · 2018-07-12T15:47:28.170

174

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>

edited Jul 12 '18 at 15:47

answered May 02 '14 at 09:28

giammin

18,620
8
71
89

12

please downvoter tell me how to improve my answer, thanks – giammin Jun 17 '15 at 21:14
3

Does not work. Commenting the labels out makes the chart throw an error on update. – IOrlandoni Jun 19 '15 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 '15 at 08:03
2

Newer highchart version? This question is about chart.js. Not highcharts. – Charlie Martin Oct 02 '15 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? – István Pálinkás Sep 06 '16 at 14:43
Nothing of the above mentioned works for my bar chart, chart.js 2.4.0. --> and also avoid to pass the labels. This should really be only a switch, so passing labels shouldn't be a concern here. Waiting for chart.js 3.x :) – Legends Jan 01 '17 at 16:48
I am using ng2-charts 1.5.0 and this code works fine. – Darin Cardin Sep 22 '17 at 18:21
@giammin, your script is not working in my case, can we discuss. – Billu Feb 02 '18 at 06:41
@user123 this is a really old answer and i have not used highcharts since them... i dont think i can help you, sorry – giammin Feb 02 '18 at 11:11
As @StevenPalinkas noted this will remove all the x-axis grid lines as well as the label text. Not ideal. – Matt K Jul 11 '18 at 23:43
@MattK you are right. I updated my answer accordingly. Thanks – giammin Jul 12 '18 at 15:49

score 41 · Answer 2 · answered Apr 10 '21 at 14:05

41

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
              }
           }
        }
    }
});

answered Apr 10 '21 at 14:05

Denismr7

559
5
3

So it's like @giammin answer, but for the newer versions? – Anton Krug Apr 10 '21 at 15:32
Yes, I use chart.js 3.0.2 and that works for me – Denismr7 Apr 11 '21 at 10:33

score 18 · Answer 3 · edited May 23 '17 at 11:47

(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 11 · Answer 4 · answered Jan 16 '15 at 14:55

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 8 · Answer 5 · answered May 29 '16 at 17:19

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.

answered May 29 '16 at 17:19

Muthukannan Kanniappan

2,080
1
16
18

Using Version: 2.1.6, this one did the trick. Also, without using global you could: `options:{ legend: { display: false, },` – StackUnder Jul 12 '16 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 01 '17 at 16:51

Snowcat · Answer 6 · 2020-07-30T20:31:43.183

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 6 · Answer 7 · edited Jun 01 '15 at 19:08

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.

I solved it inserting those lines BEFORE :this.buildScale(data.labels); Line: 2375. var newLabels=[]; for(var i=0;i — Samuele, Feb 18 '16 at 11:39

score 3 · Answer 8 · edited Apr 16 '17 at 21:24

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 · Answer 9 · edited May 23 '17 at 12:18

3

The simplest solution is:

scaleFontSize: 0

see the chart.js Document

smilar question

edited May 23 '17 at 12:18

Community

1
1

answered Oct 29 '15 at 17:46

叶碧颖

65
1

1

This would remove the y axis scale also. – Thiago Duarte Nov 20 '15 at 15:34
scaleFontSize is not a valid property – Rachel Martin Sep 11 '19 at 20:31

score 1 · Answer 10 · answered Jan 20 '23 at 01:17

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

answered Jan 20 '23 at 01:17

DevKev

5,714
6
24
29

Remove x-axis label/text in chart.js

10 Answers10

UPDATE chart.js 2.1 and above

This is for chart.js ^3.0.0

Remove x-axis labels and grid chart lines

Remove only x-axis labels

Linked

Related