Highcharts标签格式化程序问题

我正在使用格式化器为highchart列图中x轴标签中的每个空格添加换行符。但是当你一直向右滚动时，它有一个小故障/问题。

问题:一直向右滚动会导致闪烁，一旦我在页面上一直向右滚动，我得到"this.value"。"替换不是函数"错误。但只有当我一直走到右边的时候。

Demo: Here is it

目标:平滑滚动，同时在标签中每个空格都有休息。

代码:

  $(function () {
      $('#container10').highcharts({
          // colors: [Complete],
          chart: {
              type: 'column'
          },
          title: {
              text: ''
          },
          xAxis: {
              categories: [
                  'SKIN CARE FACIAL',
                  'SKIN HAND AND BODY LOTION',
                  'HAIR SHAMPOO / CONDITIONER / FIXATIVES',
                  'COUGH COLD SUNCARE (RACK 1)',
                  ' SKIN CARE FACIAL (COS Stores)',
                  ' RK 1 COUGH COLD SUNCARE (RACK 1)',
                  ' SKIN BAR SOAP / LIQUID SOAP',
                  ' COUGH COLD ALLERGY (RACK 2)',
                  'SUNCARE IN-LINE',
                  'RK 2 COUGH COLD ALLERGY (RACK 2)',
                  'ORAL CARE (COS Stores)',
                  'WOMENS BODY WASH (COS Stores)',
                  'DIGESTIVE (COS Stores)',
                  'HAIR SHAMPOO / CONDITIONER / FIXATIVES_MACRO',
                  'MENS SHAVE (COS Stores)',
                  'COSMETICS',
              ],
              min: 0,
              max: 5,
              labels: {
                  step: 1,
                  formatter: function () {
                      return this.value.replace(/ /g, '<br />');
                  },
                  style: {
                      fontSize: 9
                  }
              }
          },
          yAxis: {
              title: {
                  text: ''
              }
          },
          legend: {
              enabled: false
          },
          tooltip: {
              formatter: function () {
                  var s = '<b>' + this.x + '</b>';
                  $.each(this.points.reverse(), function () {
                      s += '<br/>' + this.series.name + ': $' + this.y.toFixed(0);
                  });
                  return s;
              },
              shared: true
          },
          plotOptions: {
              column: {
                  stacking: 'normal',
                  dataLabels: {
                      enabled: true,
                      //  color: TextColor,
                      style: {
                          // textShadow: '0 0 3px black',
                          fontSize: 10
                      }
                  }
              }
          },
          scrollbar: {
              enabled: true,
              barBackgroundColor: 'gray',
              barBorderRadius: 7,
              barBorderWidth: 0,
              buttonBackgroundColor: 'gray',
              buttonBorderWidth: 0,
              buttonBorderRadius: 7,
              trackBackgroundColor: 'none',
              trackBorderWidth: 1,
              trackBorderRadius: 8,
              trackBorderColor: '#CCC',
              rifleColor: 'black',
              buttonArrowColor: 'black',
          },
          series: [{
              name: 'Spent',
              data: [
              39362.06,
              33778.00,
              9246.24,
              4266.45,
              3469.14,
              2982.95,
              2898.72,
              1778.25,
              1659.64,
              1479.00,
              902.15,
              702.37,
              281.54,
              111.32,
              93.89,
              45.53,
              ],
              legendIndex: 0
          }]
      });
  });