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    lt script gt      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     lt  script gt

User · Answer

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

User · Answer

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

User · Answer

The simplest solution is   scaleFontSize  0  see the chart js Document  smilar question

User · Answer

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 lt labels length i             newLabels push                labels newLabels      This preserves the tool tips also

User · Answer

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    lt script gt      var options                         scaleShowLabels   false            var lineChartData               COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS           labels     1   2   3   4   5   6   7                                lt  script gt

User · Answer

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  gt  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

User · Answer

x000D   x000D  var lineChartData     x000D      labels                                  To hide horizontal labels x000D    datasets     x000D      x000D     label   My First dataset   x000D     fillColor    rgba 220 220 220 0 2    x000D     strokeColor    rgba 220 220 220 1    x000D     pointColor    rgba 220 220 220 1    x000D     pointStrokeColor     fff   x000D     pointHighlightFill     fff   x000D     pointHighlightStroke    rgba 220 220 220 1    x000D      x000D     data   28  48  40  19  86  27  90  x000D      x000D     x000D    x000D   x000D   x000D   x000D  window onload   function    x000D   var options     x000D    scaleShowLabels   false    to hide vertical lables x000D      x000D   var ctx   document getElementById  canvas1   getContext  2d    x000D   window myLine   new Chart ctx  Line lineChartData  options   x000D   x000D    x000D   x000D   x000D

User · Answer

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

[javascript] Remove x-axis label/text in chart.js

Examples related to javascript

Examples related to html

Examples related to charts

Examples related to chart.js