Cross reference within a page to figures and tables

Hi everyone,

I would like to include figures & tables in a post written in Rmarkdown,
have them automatically numbered,
and refer to them in the text.

I have already figured out the automatically numbering part,
using shortcodes + CSS counter (see my own reply for a link to this).
I also figured out how to refer to a figure using its ID in the text,
such as:

As shown in [figure](#sales-scatter-figure), blah blah

However, I could not find a good solution for the last part.
For example, how can I do the following:

As shown in *figure 4.1*, blah blah

in which, the label “4.1” would be automatically generated
and hyperlinked to the corresponding figure, rather than hard-coded by the author.

I have been searching everywhere for a solution,
and the closest thing I have found so far seemd very cumbersome,
and did not allow for hyperlink.
Instead, I would like to achieve this effect,
but without having to bypass hugo completely and use bookdown.

Any help would be much appreciated!

I cannot include this third link in my original post,
restricted by the rule of this forum.
Here it goes:

I found a way to do this elegantly. When calling the shortcode pass an id to it that you use to reference to it in the link later. In the shortcode set the id of the html tag to the id that you passed so that the link points to it. Number the element automatically using a counter in the page store and save this number in a variable with the name id in the page store.
Then also pass the id to the shortcode that creates the link. The link can then look up the number of the figure in the page store and display it in the link.