How to set reset zoom button and title to exactly center of the high charts

Question

I am trying to set the reset zoom button and title to exactly the center of the high chart. Here the title is the selected time range of the chart portion. I need to set this as dynamically centered based on the screen resolution.

chart:{
  zoomType:'x',
  resetZoomButton:{
    position:{
      verticalAlign:'top'
    },
    relativeTo:'chart'
  },
  events:{
    selection:function(event){
      this.setTitle({{text:selectedChartPortion,useHtml:true}})
    }
  }
}

here text:selectedChartPortion is a span tag that has some style properties and the selected value.

Expected Chart outlook:

Can anyone help me to resolve it?

Answer 1

I think that this config should help you to achieve a wanted effect:

  xAxis: {
    events: {
      afterSetExtremes() {
        const chart = this.chart;
        const resetZoomButton = chart.resetZoomButton;
        const padding = 5;

        if (resetZoomButton) {
          chart.title.translate(-chart.title.getBBox().width / 2 - padding, 0)
          resetZoomButton.translate(chart.plotWidth / 2 + resetZoomButton.getBBox().width / 2 + padding, 0)
        } else {
          chart.title.translate(chart.title.getBBox().width / 2 + chart.title.translateX, 0)
        }
      }
    }
  }

Demo: https://jsfiddle.net/BlackLabel/8yjd9orx/

API: https://api.highcharts.com/highcharts/chart.resetZoomButton.position.align

API: https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes