0

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:

enter image description here

Can anyone help me to resolve it?

Zhu
  • 3,679
  • 14
  • 45
  • 76

1 Answers1

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

Sebastian Wędzel
  • 11,417
  • 1
  • 6
  • 16
  • I fixed the center position for changing the resolution - https://jsfiddle.net/BlackLabel/rdL7w92c/ but I am not sure about your first comment - could you reproduce this issue? – Sebastian Wędzel Apr 08 '21 at 08:29
  • https://stackoverflow.com/questions/67213217/how-to-remove-and-add-plotlines-in-highcharts @Sebastian Wędzel can you please help me in this – Zhu Apr 23 '21 at 04:59