Highcharts xrange needs to fill chart width

Question

I need a highcharts chart that creates a mobile-friendly timeline. I am using xrange for my series, here are the settings:

{
    chart: {
      inverted: true,
      height: '500px',
      backgroundColor: '',
      plotBackgroundColor: '',
      style: {
        fontFamily: 'Open Sans'
      }
    },
    xAxis: {
      max: 24,
      min: 0,
      endOnTick: true,
      lineWidth: 1,
      gridLineWidth: 0,
      lineColor: 'transparent',
      gridLineColor: 'transparent',
      tickLength: 0,
      title: {
        text: ''
      },
      startOnTick: true,
      labels: {
        style: {
          color: '#ffffff',
          fontWeight: '600'
        },
      },
      tickInterval: 1
    },
    yAxis: {
      title: {
        text: ''
      },
      labels: {
        enabled: false
      },
      gridLineWidth: 0,
      categories: ['']
    },
    series: [
      {
        type: 'xrange',
        borderColor: 'gray',
        borderRadius: 0,
        states: {
          inactive: {
            opacity: 1
          }
        },
        data: scheduleData,
        dataLabels: {
          enabled: true,
          formatter: function() {
            let style = `color: ${
              this.point.name === 'charging' ? 'black' : 'white'
            }; font-weight: bold;`
            return `<span style="${style}">${this.point.name}</span>`
          }
        }
      }
    ]
  }

I need the width of the data to take up the entire graph. I have tried many different things with pointWidth, clip, and many other highcharts settings but nothing seems to be working.

Answer 1

Set groupPadding: 0, pointPadding: 0 for series and startOnTick: false for yAxis to achieve no-space xrange in your case.

Example code:

Highcharts.chart('container', {
  chart: {
    type: "xrange",
    inverted: 'true'
  },
  yAxis: {
    startOnTick: false,
    categories: [''],
  },
  series: [{
    groupPadding: 0,
    pointPadding: 0,
    data: [{
      x: 1,
      x2: 3
    }]
  }]
});

Simplified demo:

https://jsfiddle.net/BlackLabel/294k5fsu/