How can I align Chart title with the bar dynamically?

Question

How can I align Chart title with the bar in highcharts?

The bar length may vary because of the data, so I want my title to end where the bar is ending.

I want to implement something like this:

Answer 1

I would suggest adding a padding-right: ##px as you havent provided any code to work with. try applying the method via inspect element and add the code into your css after with the right amount of "px" needed.

Answer 2

To adjust the title you can set tittle.attr in the events.redraw event. You need to remember that a bar chart is an inverted column chart and where you have an x-axis there will be a y-axis.

  chart: {
    events: {
      render: function() {
        let chart = this,
          series = chart.series[0],
          title = this.title,
          point = series.points[0];
                    
        title.attr({
          x: chart.plotTop + point.x,
          y: chart.plotLeft + point.y 
        });
      }
    }
  },

API References:

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

https://api.highcharts.com/class-reference/Highcharts.SVGElement

Demo: https://jsfiddle.net/BlackLabel/ud45prLg/