I think it would be a good idea to get back to the basics. It's a large post, so there's a recap at the end.
Colour can be represented in a couple of ways. We can have Red, Green and Blue (RGB). We could have CMYK (used in printing). There's also YCbCr/YUV (one for luminance and two for colour) and similar flavours of that. We have HSV/HSL/HSB (hue, saturation, value/luminance/brightness). And even more. These are called colour models (or color models, depending on where you live). RGB is the most popular model in terms of computer graphics. It's how colour film stock, digital sensors, monitors and roughly our eyes work. So, from now I'll be using the RGB colour model. The things in the rest of this post will have equivalents for the other models, but for simplicity it's just RGB for now.
We have three values, R G and B, but that raises the question. If we have 100% red, 0% green and 0% blue, what kind of red is it? The answer is, we don't know. So, we have to define what kind of red red is, what kind of green green is, what kind of blue blue is and what kind of white white is. White is also important to define. This definition is called the colour gamut. The colour gamut defines the chromaticities for red, green, blue and white. Chromaticity is colour but without the luminance (basically just the hue and saturation). By defining the colour gamut, we will know exactly what colour we have for any given RGB value.
But there's another thing. If we want to send an image to our monitor or save it to a file on our drive, we don't want to have to send over or save a lot of data. We basically want to use the least amount of bits we can. We found out that having 8 bits for the red, green and blue values is enough. However! Our eyes are more sensitive to changes in brightness in dark areas and less sensitive in bright areas of an image. So, while 8 bits is enough for the bright areas, in the darker areas we can really see that we only have 256 possible values for red, green and blue. We fix this by moving around the values in order to use more of those 256 values for the darker areas and less on the brighter areas. Right now I am using 8 bits as an example, but this is the same for any amount of bits (10 and 12 bits is also popular but has the same problem). We do this using a transfer function. In short, a transfer function redistributes the values in order to more efficiently use a limited amount of bits.
Gamma correction (or just gamma) is a form of a transfer function. As you can see in your graph (the blue line) it nudges the values upwards which means that the range [0,0.5] becomes [0,0.73]. This means that we have almost 50% more bits for the darker areas of our image! That's what we want. Gamma isn't the only kind of transfer function. Another popular one is log, which is an umbrella term for transfer functions (or colour spaces using transfer functions) that make use of logarithms. With logarithms, each stop of light gets roughly the same amount of bits, which is really useful for images that have a very high dynamic range (like what comes out of a cinema camera). Perceptual quantizer (SMPTE ST 2084) is another transfer function that is used a lot in HDR video (like HDR10 and Dolby Vision) and it's made to take advantage of how our eyes perceive brightness (which falls somewhere between a logarithmic curve and cube-root curve). Values that haven't been transformed by a transfer function are called linear.
When you combine a colour model, colour gamut and transfer function, you get a colour space. A colour space specifies how the colours are represented (what colour is what). There is one very important thing however, you do not need a transfer function for a colour space. sRGB is a very popular colour space which is used by practically every computer monitor. It uses the RGB colour model with the sRGB colour gamut (Rec.709 uses the same gamut) and the transfer function is generally a gamma of 2.2 (although it actually isn't, but most use the gamma for simplicity, go look at its Wikipedia page). But you also have linear-sRGB which is also a colour space that just like sRGB, uses the RGB model and sRGB gamut, but doesn't have a transfer function. The values are in linear (often referred to as "scene linear").
To try and make things a bit more clear, here's an example showing how a transfer function works when displaying an image that is either CGI or a video game being rendered. The first thing that is important is that both the computer/program and the display need to agree on the colour space to use. In this example, we use sRGB. Basically, the program sends the sRGB image to the display and the display takes that sRGB image and converts it to the actual electronic signals to send to the pixels.
And now we finally get to tone mapping. A tone mapper is a function that takes in a large, generally infinite, range of values and compresses it to a smaller, often limited, range of values. Tone mapping is generally used to apply a "look". A very popular tone mapping is the filmic s-curve, which is called a "film characteristic curve" or "Hurter–Driffield curve". It adds some contrast in the shadows and instead of the highlights clipping once they reach 100% brightness, it adds a nice roll-off that gradually brings it to 100%. This tone mapper is used in a lot of places. It's how film stock behaves, it's what digital cinema cameras often do, in video games they use this curve. Basically, because it looks good and with it we can see values above 100% (because the tone mapper maps it to something below 100%). If you want to tone map your image, it should be done before the transfer function/colour space conversion (for example converting from linear-sRGB to sRGB), because tone mapping isn't part of a colour space and is basically a look (just like applying a filter over an image).
However, you don't need a tone mapper. If you take a cheap camcorder, DSLR, your phone (depending on the settings) or a broadcast camera they use to film the news and such (especially before the 2010s), then all of them don't do any kind of tone mapping. They just apply the sRGB or Rec.709 colour space (and thus also the transfer function) and that's it. What you often do see is that parts of the image go to 100% white very quickly and then clips Here's a picture that I took with my phone. It's just normal average sRGB and no tone mapping. 
You can see that the cloud is completely white and the trees are quite dark. Using a tone mapper, I could bring those values closer together and not have the clouds be 100% white without any detail, while still being able to see detail in the trees.
To recap
- Gamma correction is a type of transfer function, which is part of a colour space.
- A colour space tells us how to represent and store colours.
- When we want to send images to our display, we need to apply the transfer function.
- The display will undo that transfer function (and will do it no matter what, so you have to apply the transfer function on your end to get the correct values when displayed).
- A tone mapper is both to apply a look and to compress the range of RGB values to a smaller range so that we can see a high dynamic range image on a standard dynamic range monitor.
- While you need to apply a transfer function when sending the image to the display, you don't need to apply a tone mapper. Only if you want to.
