Remove DateTime From Highchart's X-axis

What I have is a Highchart plotting data points every second. 1 data point per second. Now, On the X-axis what I have is the Timedata. What I want is that to remove the time data

Solution 1:

You can achieve it by adding custom logic to xAxis.tickPositioner to return appropriate tick positions and xAxis.labels.formatter to change the timestamps into proper point count. Check the demo and code posted below.

Code:

xAxis: {
  type: 'datetime',
  tickPixelInterval: 150,
  tickPositioner: function() {
    var axis = this,
      chart = axis.chart,
      ticks = [],
      divider;

    if (axis.series[0].points && axis.series[0].points.length) {
      ticks = axis.series[0].points.filter(point => point.y !== null).map(point => point.x);
    }

    divider = Math.ceil(ticks.length / 20);
    chart.customLabelDivider = divider;

    if (divider > 1) {
      ticks = ticks.filter((tick, i) => i % divider === 0);
    }

    return ticks;
  },
  labels: {
    formatter: function() {
      var chart = this.chart;

      if (this.isFirst) {
        chart.customLabelCount = 1;
      } else {
        chart.customLabelCount += chart.customLabelDivider;
      }

      return chart.customLabelCount;
    }
  }
}

Demo:

• https://jsfiddle.net/BlackLabel/w2s8Le04/

API reference:

• https://api.highcharts.com/highcharts/xAxis.tickPositioner

• https://api.highcharts.com/highcharts/xAxis.labels.formatter

Solution 2:

From the Docs, you can disable the X-axis labels like below

    xAxis: {

        labels: {
            enabled: false
        }
    },

Here is the updated JSFiddle