title: chart.js bar chart x-axis label disappeared
body: <p>After resize:</p>
  <p><img src="https://i.stack.imgur.com/ydjBh.jpg" alt="before resize" /></p>
  <p>Before resize:</p>
  <p><img src="https://i.stack.imgur.com/Aj0Ai.jpg" alt="after resize" /></p>
  <p>This is my code. I want to make charts always the same size, but I don't know how.</p>
  <p>This is <code>chart.js</code> range settings, but I think they are incorrect in this situation.</p>
  <blockquote>
  <p>Given the number of axis range settings, it is important to understand how they all interact with each other.</p>
  <p>The suggestedMax and suggestedMin settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.</p>
  </blockquote>
  <pre><code>      /*#######################################*/
        var warnColor = 'rgba(255, 0, 0, 1)';
        var careColor = 'rgba(255, 228, 0, 1)';
        var protectColor = 'rgba(54, 162, 235, 1)';
  
        Chart.pluginService.register({//PLUG IN
          beforeUpdate: function(chartInstance) {
            chartInstance.data.datasets.forEach(function(dataset) {
              dataset.backgroundColor = dataset.data.map(function(data) {
                if ( data &gt;= 70) return warnColor;
                else if ( data &gt;= 50 &amp;&amp; data &lt; 70 ) return careColor;
                else return protectColor;
              })
            })
          }
        });
  
        Chart.defaults.global.defaultFontSize = 15;
  
        var ctx = $('#myChart');
        var myChart = new Chart(ctx, {
          type: 'bar',
            data: {
              labels: [&quot;CPU Usage&quot;, &quot;Memory Usage&quot;, &quot;Network Usage&quot;, &quot;Disk Usage&quot;, &quot;SysvIPC Count&quot;],
              datasets: [{
                data: [10,20,30,40,50],
                borderColor: [
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
              }]
            },
            options: {
                      responsive: true,
                      maintainAspectRatio: false,
                      layout: {
                          padding: {
                            left: 0,
                            right: 0,
                            top: 40,
                            bottom: 0
                          }
                        },
                        onClick: barClickEvent,
                        legend: {
                          display: false
                        },
                        scales: {
                          yAxes: [{
                            ticks: {
                              min: 0,
                              max: 100,
                              beginAtZero:true
                            },
                          }]
                        },
                        tooltips: {
                            enabled: true
                        },
                        hover: {
                            animationDuration: 0
                        },
                        animation: {
                            duration: 1,
                            onComplete: function () {
                              var chartInstance = this.chart,
                                  ctx = chartInstance.ctx;
                                  ctx.font = Chart.helpers.fontString(17, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                  ctx.textAlign = 'center';
                                  ctx.textBaseline = 'bottom';
  
                                  this.data.datasets.forEach(function (dataset, i) {
                                      var meta = chartInstance.controller.getDatasetMeta(i);
                                      meta.data.forEach(function (bar, index) {
                                          var data = dataset.data[index];
                                          ctx.fillStyle = &quot;#000000&quot;;
                                          if (index !== 4) {//qnum
                                            data += '%';
                                          }
                                          ctx.fillText(data, bar._model.x, bar._model.y - 5);
                                      });
                                  });
                              }
                          }
                      }
          });
          function barClickEvent(event, array){
  
            var activePoints = myChart.getElementsAtEvent(event);
  
            switch (activePoints[0]._index) {
              case 0: window.location = '/usage_cpu';
                break;
              case 1: window.location = '/usage_mem';
                break;
              case 2: window.location = '/usage_tcp';
                break;
              case 3: window.location = '/usage_disk';
                break;
              case 4: window.location = '/stat_ipcq';
                break;
              default: window.location = '/';
            }
          }
      
  </code></pre>