Using amCharts, how can I recreate thresholds behind bars as shown below?

Question

I've been given the image above as an example of what the final chart should look like, but I'm having difficulty creating it.

We have to use amCharts due to the technology we're using, and I've got the columns stacked and coloured as I want, but I can't find a way to add the thresholds (shown in light green/blue/yellow). It'd also be nice to display it on a logarithmic scale as per the top of the image, but I'm not quite so bothered about that.

Any help appreciated.

Update:

Thanks to the spectacular help of xorspark I've managed to get it as I want it, even though I ended up not using logarithms.

The code is at https://codepen.io/dangerworm/pen/mByGqL for those interested.

Answer 1

You can use guides to specify your thresholds and label each subdivision. To accomplish your particular output, you need two sets of guides for each - one for the filled area and another to place the label and line on top. For example:

  valueAxes: [
    {
      logarithmic: true,
      guides: [
        {
          fillColor: "#ffff00",
          fillAlpha: 0.5,
          lineAlpha: 0,
          value: .1, //note that you can't use 0 in a logarithmic axis
          toValue: 40
        },{
          dashLength: 6,
          fillColor: "#ffff00",
          fillAlpha: 0.5,
          label: "poor",
          position: "right",
          lineAlpha: 1,
          value: 40,
        },
        // ...
     ]
     // ...
   }

Demo