r.globals.xAxisScale is null / Cannot read property 'niceMin' of null

I am trying to put a brush chart in my React App. I only want a single, minimalist chart to start with. My target chart is hidden.

I get a console error instead of a selection event when I change the selection of my chart on my webpage.

In Chrome, it says: Cannot read property ‘niceMin’ of null In Firefox, it says r.globals.xAxisScale is null

Here is how I am defining my chart options

var series = [{
  name: 'vals',
  data: data_vals
}];

// Dummy Data
var data_idx = Array.from(Array(255).keys());
var data_vals = Array.from({length: 255}, () => Math.ceil(Math.random() * 100));


var brushChartOptions = {
  colors: ['#04638f'],
  fill: {
    type: "gradient",
    gradient: {
      opacityFrom: 0.1,
      opacityTo: 0.91
    }
  },
  xaxis: {
    type: 'category',
    labels: {
      show: false
    },
    axisTicks: {
      show: false,
    },
    categories: data_idx
  },
  yaxis: {
      show: false,
  },
  chart: {
    id: "chartBrush",
    brush: {
      enabled: true,
      target: "hiddenChart"
    },
    events: {
      selection: function (chartContext, {xaxis, yaxis}) {
        console.log(chartContext);
      }
    },
    selection: {
      enabled: true,
      xaxis: {
        min: 0,
        max: 255
      }
    }
  },

}

var hiddenChartOptions = {
  chart: {
    id: "hiddenChart",
  }
}

[lengoman]

This error is no longer happening on version 1.5.2

[junedchhipa]

Currently, the brush chart works only with datetime xaxis. @michaeljakob If you want to override the labels of datetime xaxis with your own formatter, you can do

xaxis: {
  type: 'datetime',
  tickAmount: 10,
  labels: {
    formatter: function(value) {
     ...
    }
  }
}