How To Show Tickpositions As Start And End For Each Bar In Highcharts?

I have a bar chart with multiple bars. Each bar is representing a range with a start range and an end range. Please see the attached image. What I'm looking for is to align the ti

Solution 1:

You can check the column position after chart creation, convert pixels to axis value and set tick positions dynamically:

events: {
  load: function() {
    var point = this.series[0].points[0],
      xAxis = this.xAxis[0],
      x1 = xAxis.toValue(point.shapeArgs.x + this.plotTop),
      x2 = xAxis.toValue(
        point.shapeArgs.x + point.shapeArgs.width + this.plotTop
      );

    xAxis.update({
      tickPositions: [x1, x2]
    });
  }
}

---

Live demo:http://jsfiddle.net/BlackLabel/fdtaow47/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Axis#toValue

https://api.highcharts.com/highcharts/chart.events.load