tl;dr– That bar-graph was modified from another bar-graph I'd posted before. It uses some standard helper-functions, but is otherwise pretty much by-hand. The code used is fairly straightforward, though it may look more cryptic in those comments because it was compressed down to fit within a 500-character limit. At the end of this answer, there're some links to other potentially interesting uses of $\mathrm{\TeX} .$
That bar-graph was a variant of one I'd commented at SE.WorldBuilding:
$$\def\p#1#2#3{\smash{\rlap{\hskip{#1px}\raise{#2px}{#3}}}}\newcommand{\r}[1]{\hskip{-1in}\style{transform-origin:left;display:inline-block;transform:rotate(-90deg);padding:1in}{#1}}\newcommand{\b}[3]{\hskip{15px}\color{#3}{\p{0}{0}{\rule{10px}{#2px}}\p{0}{#2}{\raise{2px}{\Tiny#2}}\p{0}{-9}{\r{\llap{\Tiny\text{#1}}}}}}\p{0}{80}{\p{-8}{2}{\b{Sweden}{17}{Red}\b{Denmark}{19}{Tan}\b{Norway}{21}{Blue}\b{UK}{27}{Cyan}\b{Netherlands}{33}{Grey}\b{Germany}{40}{Plum}\b{USA}{65}{}\b{Turkey}{82}{Brown}\b{South Africa}{85}{Green}}\p{0}{0}{\rule{2px}{90px}\rule{138px}{2px}}}{\phantom{\rule{145px}{175px}}}$$
, with the source-code:
\def\p#1#2#3{\smash{\rlap{\hskip{#1px}\raise{#2px}{#3}}}}\newcommand{\r}[1]{\hskip{-1in}\style{transform-origin:left;display:inline-block;transform:rotate(-90deg);padding:1in}{#1}}\newcommand{\b}[3]{\hskip{15px}\color{#3}{\p{0}{0}{\rule{10px}{#2px}}\p{0}{#2}{\raise{2px}{\Tiny#2}}\p{0}{-9}{\r{\llap{\Tiny\text{#1}}}}}}\p{0}{80}{\p{-8}{2}{\b{Sweden}{17}{Red}\b{Denmark}{19}{Tan}\b{Norway}{21}{Blue}\b{UK}{27}{Cyan}\b{Netherlands}{33}{Grey}\b{Germany}{40}{Plum}\b{USA}{65}{}\b{Turkey}{82}{Brown}\b{South Africa}{85}{Green}}\p{0}{0}{\rule{2px}{90px}\rule{138px}{2px}}}{\phantom{\rule{145px}{175px}}}
. To keep within a 500-character limit, I compressed the source-code (markup) a lot, making it more cryptic in the process. So that source-code may've been better for SE.CodeGolf than SE.CodeReview.
For a more legible version:
%
% Define helper functions:
%
% Helper function "place":
% Place something at an (x,y) location.
% Argument 1: The x-coordinate.
% Argument 2: The y-coordinate.
% Argument 3: The thing to be placed.
%
\def\place#1#2#3{\smash{\rlap{\hskip{#1px}\raise{#2px}{#3}}}}
%
% Helper function "rotate":
% Rotate something by -90-degrees.
% Argument 1: The thing to be rotated.
%
\newcommand{\rotate}[2]{\hskip{-1in}\style{transform-origin:left;display:inline-block;transform:rotate(#2deg);padding:1in}{#1}}
%
% Helper function "addBarToGraph":
% Add a bar to the bar-graph.
% Argument 1: Label for the bar.
% Argument 2: Numeric value for the bar (determines both bar-height and the tag above the bar).
% Argument 3: Color for the bar (determines color for bar, label, and tag).
%
\newcommand{\addBarToGraph}[3]{\hskip{15px}\color{#3}{\place{0}{0}{\rule{10px}{#2px}}\place{0}{#2}{\raise{2px}{\Tiny#2}}\place{0}{-9}{\rotate{\llap{\Tiny\text{#1}}}{-90}}}}
%
% Helper function "newDrawingArea":
% Allocate an area for drawing stuff.
% Argument 1: Width of the drawing-area.
% Argument 2: Height of the drawing-area.
% Argument 3: The stuff to draw in the drawing-area.
%
\newcommand{\newDrawingArea}[3]{{\place{0}{0}{#3}} {\phantom{\rule{#1}{#2}}}}
%
% Draw
%
\newDrawingArea{145px}{175px}{ % Declares drawing-area.
\place{0}{80}{
\place{-8}{2}{ % Set up position for the first bar in the bar-graph.
%
% Draw the bars in series.
%
\addBarToGraph{Sweden}{17}{Red}
\addBarToGraph{Denmark}{19}{Tan}
\addBarToGraph{Norway}{21}{Blue}
\addBarToGraph{UK}{27}{Cyan}
\addBarToGraph{Netherlands}{33}{Grey}
\addBarToGraph{Germany}{40}{Plum}
\addBarToGraph{USA}{65}{} % Note: Absent color-specification defaulted to black.
\addBarToGraph{Turkey}{82}{Brown}
\addBarToGraph{South Africa}{85}{Green}
}
\place{0}{0}{
\rule{2px}{90px} % Draw the y-axis (as a tall, thin block).
\rule{138px}{2px} % Draw the x-axis (as a wide, short block).
}
}
}
, which still looks like:
$$
%
% Define helper functions:
%
% Helper function "place":
% Place something at an (x,y) location.
% Argument 1: The x-coordinate.
% Argument 2: The y-coordinate.
% Argument 3: The thing to be placed.
%
\def\place#1#2#3{\smash{\rlap{\hskip{#1px}\raise{#2px}{#3}}}}
%
% Helper function "rotate":
% Rotate something by -90-degrees.
% Argument 1: The thing to be rotated.
%
\newcommand{\rotate}[2]{\hskip{-1in}\style{transform-origin:left;display:inline-block;transform:rotate(#2deg);padding:1in}{#1}}
%
% Helper function "addBarToGraph":
% Add a bar to the bar-graph.
% Argument 1: Label for the bar.
% Argument 2: Numeric value for the bar (determines both bar-height and the tag above the bar).
% Argument 3: Color for the bar (determines color for bar, label, and tag).
%
\newcommand{\addBarToGraph}[3]{\hskip{15px}\color{#3}{\place{0}{0}{\rule{10px}{#2px}}\place{0}{#2}{\raise{2px}{\Tiny#2}}\place{0}{-9}{\rotate{\llap{\Tiny\text{#1}}}{-90}}}}
%
% Helper function "newDrawingArea":
% Allocate an area for drawing stuff.
% Argument 1: Width of the drawing-area.
% Argument 2: Height of the drawing-area.
% Argument 3: The stuff to draw in the drawing-area.
%
\newcommand{\newDrawingArea}[3]{{\place{0}{0}{#3}} {\phantom{\rule{#1}{#2}}}}
%
% Draw
%
\newDrawingArea{145px}{175px}{ % Declares drawing-area.
\place{0}{80}{
\place{-8}{2}{ % Set up position for the first bar in the bar-graph.
%
% Draw the bars in series.
%
\addBarToGraph{Sweden}{17}{Red}
\addBarToGraph{Denmark}{19}{Tan}
\addBarToGraph{Norway}{21}{Blue}
\addBarToGraph{UK}{27}{Cyan}
\addBarToGraph{Netherlands}{33}{Grey}
\addBarToGraph{Germany}{40}{Plum}
\addBarToGraph{USA}{65}{} % Note: Absent color-specification defaulted to black.
\addBarToGraph{Turkey}{82}{Brown}
\addBarToGraph{South Africa}{85}{Green}
}
\place{0}{0}{
\rule{2px}{90px} % Draw the y-axis (as a tall, thin block).
\rule{138px}{2px} % Draw the x-axis (as a wide, short block).
}
}
}
\,.
$$
It's fairly straightforward to tweak. For example, if we tweak the definition of \addBarToGraph to do a rotation by -45 (degrees) rather than -90 (degrees), it'd look like:
$$
%
% Define helper functions:
%
% Helper function "place":
% Place something at an (x,y) location.
% Argument 1: The x-coordinate.
% Argument 2: The y-coordinate.
% Argument 3: The thing to be placed.
%
\def\place#1#2#3{\smash{\rlap{\hskip{#1px}\raise{#2px}{#3}}}}
%
% Helper function "rotate":
% Rotate something by -90-degrees.
% Argument 1: The thing to be rotated.
%
\newcommand{\rotate}[2]{\hskip{-1in}\style{transform-origin:left;display:inline-block;transform:rotate(#2deg);padding:1in}{#1}}
%
% Helper function "addBarToGraph":
% Add a bar to the bar-graph.
% Argument 1: Label for the bar.
% Argument 2: Numeric value for the bar (determines both bar-height and the tag above the bar).
% Argument 3: Color for the bar (determines color for bar, label, and tag).
%
\newcommand{\addBarToGraph}[3]{\hskip{15px}\color{#3}{\place{0}{0}{\rule{10px}{#2px}}\place{0}{#2}{\raise{2px}{\Tiny#2}}\place{0}{-9}{\rotate{\llap{\Tiny\text{#1}}}{-45}}}}
%
% Helper function "newDrawingArea":
% Allocate an area for drawing stuff.
% Argument 1: Width of the drawing-area.
% Argument 2: Height of the drawing-area.
% Argument 3: The stuff to draw in the drawing-area.
%
\newcommand{\newDrawingArea}[3]{{\place{0}{0}{#3}} {\phantom{\rule{#1}{#2}}}}
%
% Draw
%
\newDrawingArea{145px}{175px}{ % Declares drawing-area.
\place{0}{80}{
\place{-8}{2}{ % Set up position for the first bar in the bar-graph.
%
% Draw the bars in series.
%
\addBarToGraph{Sweden}{17}{Red}
\addBarToGraph{Denmark}{19}{Tan}
\addBarToGraph{Norway}{21}{Blue}
\addBarToGraph{UK}{27}{Cyan}
\addBarToGraph{Netherlands}{33}{Grey}
\addBarToGraph{Germany}{40}{Plum}
\addBarToGraph{USA}{65}{} % Note: Absent color-specification defaulted to black.
\addBarToGraph{Turkey}{82}{Brown}
\addBarToGraph{South Africa}{85}{Green}
}
\place{0}{0}{
\rule{2px}{90px} % Draw the y-axis (as a tall, thin block).
\rule{138px}{2px} % Draw the x-axis (as a wide, short block).
}
}
}
\,.
$$
As for this SE.MathEducators comment with the bar-graph asked about in this question, I mostly just did some minor tweaks. In particular:
The prior bar-graph had the bar-heights specified in pixels (px), which was more appropriate for the values there (ranging from 17 to 85). Since the new plot had values from 1.28 to 7.88, I switched the units from px to em.
I ad-hoc tweaked some of the sizes and spacings to improve the layout.
Note that the colors used above (Red, Tan, Blue, etc.) were selected for their short names, to help keep the character-count down. Before @user added it into their answer, they picked new colors that'd better match the corresponding bar-graph's.
Miscellaneous notes.
Yup, the programming-language (markup-language) used is $\mathrm{\TeX} .$ On StackExchange, it's compiled (rendered) by MathJax.
I wrote the original bar-graph by hand, though I've used the helper-functions like \place and \rotate before, so they were sorta copy/paste'd reuses. Also, I think I got \place after seeing someone else use it (or something pretty similar) elsewhere.
\rotate's code is probably specific to MathJax, as it uses CSS-transforms. By contrast, other $\mathrm{\TeX}$ environments may not be so closely tied to web-pages, such that CSS-transforms might not be as natural for them.
Folks who'd like to use these helper-functions can feel free! Though note that their above-forms are sorta ad-hoc helpers; folks might want to tweak things as appropriate for their use-cases.
I do sometimes like doing stuff with MathJax on StackExchange sites. Here're a few links that might be interesting to peek at:
This answer, which shows how to specify hyperlinks between points in posts.
This answer, which uses $\mathrm{\TeX}$ to help annotate around an image.
This answer, which draws a figure with $\mathrm{\TeX} .$
This answer also attempted to draw a figure with $\mathrm{\TeX} .$
This meta-discussion has some basic tips for using $\mathrm{\TeX} .$
This answer used $\mathrm{\TeX}$ at SE.CodeGolf.
This answer shows some assorted $\mathrm{\TeX}$ in a math-context.
This answer has an example of a table that used a helper-function for adding rows, much like the above bar-graphs had a helper-function for adding bars.
