chart.js bar chart x-axis label disappeared

Question

After resize:

Before resize:

This is my code. I want to make charts always the same size, but I don't know how.

This is chart.js range settings, but I think they are incorrect in this situation.

Given the number of axis range settings, it is important to understand how they all interact with each other.

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.

      /*#######################################*/
      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 >= 70) return warnColor;
              else if ( data >= 50 && data < 70 ) return careColor;
              else return protectColor;
            })
          })
        }
      });

      Chart.defaults.global.defaultFontSize = 15;

      var ctx = $('#myChart');
      var myChart = new Chart(ctx, {
        type: 'bar',
          data: {
            labels: ["CPU Usage", "Memory Usage", "Network Usage", "Disk Usage", "SysvIPC Count"],
            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 = "#000000";
                                        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 = '/';
          }
        }
    

Answer 1

Old question, but this may be because you have to disable autoSkip:

scales: {
    xAxes: [{
        stacked: false,
        beginAtZero: true,
        scaleLabel: {
            labelString: 'Month'
        },
        ticks: {
            autoSkip: false
        }
    }]
}

You can read more about it here: http://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration