How to dynamically link a bar chart to a table and present them in a single synchronized figure

Question

This answer has addressed the question of presenting a bar chart and its data table together in a single figure. Not to repeat the same question, I should point out that the answer given is not sufficient to create a stable figure including a bar chart and the data behind it. The missing link between the bar chart and the table makes it difficult to use effectively.

The problem with the answer is that whenever we change the data, the country names in the bar chart move in an unsynchronized manner and resulting in a figure in which the bar chart and the table are not communicating with each other. This problem can be solved by linking the total width of the bars for a given country to the width of the associated column in the table. There might be other methods to solve the problem. Can anybody guide me on this dynamic linkage issue?

@okkesdulgerci: uses Overlay which fixes the chart and table in a single figure but again the dynamic linkage concerned is missing.

Answer 1

Unfortunately it is quite complicated to get Grid to do what one wants. I sometimes use Pane to get customized tweaking. Probably some alignments could/should be done with the Alignment option of Grid, but I cannot get this to work, so here an attempt to get what you want, extending (https://mathematica.stackexchange.com/a/261215)

Clear["Global`*"]

air = {3, 1, 6, 3, 1, 6};
water = {2, 4, 3, 2, 4, 3};
road = {1, 0, 7, 1, 0, 7};
root = {6, 1, 2, 6, 1, 2};
clist = Pane[#,ImageSize -> 45,ImageSizeAction -> "Scrollable"]&/@{"Belarus", "Georgia", "Armenia",
   "CountryALittleLonger", "CountryB", "CountryC"};

legends = Row /@
   Transpose[{
     {" ", " ", " ", " "},
     ColorData["Pastel"] /@ Range[0, 1, 1/3],
     {" ", " ", " ", " "},
     {"change in air", "flowing water",
      "construction road", "agriculture root"}}];

Manipulate[
 bc = BarChart[
   Transpose[#[[;; nbr]] & /@ {air, water, road, root}],
   ChartLabels -> {clist[[;; nbr]], None},
   ChartStyle -> {None, "Pastel"},
   PlotTheme -> "Business",
   AspectRatio -> 1.2,
   ImageSize -> 50 nbr];
 Column[
    {Grid[{
           {Pane[Rotate[Style["Percent Change", 10], Pi/2], Alignment -> Right,ImageSize->142], bc}
          } ~Join~
        (Map[Flatten]@ 
         Transpose[{legends, (Row[Flatten@{Spacer[4],#,Spacer[4]}]&@
         Map[Framed[#,FrameMargins -> {{3.3,0},{0,0}},FrameStyle -> None]&]@
         Map[ Framed[Pane[#, ImageSize -> 44,Alignment->Center],FrameMargins->0,FrameStyle-> None]&,#[[;; nbr]]] )& /@ 
         {air, water, road, root}}]
        ), 
        Dividers -> {LightGray, Darker@Red}, 
        Alignment -> {Left, Center}, 
        Background -> {{Lighter[Gray, 0.8], {Lighter[Gray, 0.9]}}, None}
     ]}, 
  Spacings -> 0, Background -> Lighter[Gray, 0.9]],
 {{nbr, 3, "number of countries"}, Range[2, Length@clist]},
 Paneled -> False]