ZingChart Series value box not showing despite identical data and options to a series value box that does show on horizontal bar chart

Question

Could someone please explain to me why the first series value box is not showing up but the rest of them are? I've been banging my head against the wall on this for an hour now. I've faked data below, but the outcome is the same. Thank you in advance!

var ctFin = 60;
var myConfig = {
  "type": "hbar",
  "font-family": "proxima_nova_rgregular",
  "title": {
    "text": "MINUTES <b>IN ZONES</b>",
    "font-family": "proxima_nova_rgregular",
    "background-color": "none",
    "font-color": "#39393d",
    "font-size": "22px",
    "adjustLayout": true,
    "height": "35px",
    "padding-bottom": "23px"
  },
  "plot": {
    "bars-overlap": "1%",
    "borderRadius": "0 3px 3px 0",
    "hover-state": {
      "visible": false
    },
    "animation": {
      "delay": 300,
      "effect": 4,
      "speed": "500",
      "method": "0",
      "sequence": "3"
    }
  },
  "plotarea": {
    "height": "99px",
    "border-left": "3px solid #39393d",
    "padding-left": "3px",
    "margin": "0 0 0 3px"
  },
  "scale-x": {
    "line-color": "none",
    "tick": {
      "visible": false
    },
    "guide": {
      "visible": false
    },
    "item": {
      "visible": false
    }
  },
  "scale-y": {
    "visible": false,
    "guide": {
      "visible": false
    }
  },
  "series": [
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#cdcccc",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    },
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#71cbdc",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    },
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#8cc541",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    },
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#d96c27",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    },
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#ea2629",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    }
  ]
};
zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 140,
  width: 330
});

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>

Answer 1

As @axlj said, adjusting your plotarea will fix the issue. You defined a plotarea less than the total heigh of all your bars. You defined barWidth:'20px' so total height was 100px (5bars * 20). If you define plotarea:'100px' it will work fine. In the end you don't need to specify the plotarea height though. I took the liberty to merge some of your JSON attributes as well.

var ctFin = 60;
var myConfig = {
  "type": "hbar",
  "font-family": "proxima_nova_rgregular",
  "title": {
    "text": "MINUTES <b>IN ZONES</b>",
    "font-family": "proxima_nova_rgregular",
    "background-color": "none",
    "font-color": "#39393d",
    "font-size": "22px",
    "adjustLayout": true,
    "height": "35px",
    "padding-bottom": "23px"
  },
  "plot": {
    "bar-width":20,
    "bars-overlap": "1%",
    "borderRadius": "0 3px 3px 0",
    "hover-state": {
      "visible": false
    },
    "animation": {
      "delay": 300,
      "effect": 4,
      "speed": "500",
      "method": "0",
      "sequence": "3"
    },
    "value-box": {
        "placement": "top-in",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
  },
  "tooltip": {
    "visible": false
  },
  "plotarea": {
    "border-left": "3px solid #39393d",
    "padding-left": "3px",
    "margin": "0 0 0 3px"
  },
  "scale-x": {
    "visible": false
  },
  "scale-y": {
    "visible": false,
    "guide": {
      "visible": false
    }
  },
  "series": [
    {
      "values": [5],
      "background-color": "#cdcccc",
    },
    {
      "values": [5],
      "background-color": "#71cbdc",
    },
    {
      "values": [5],
      "background-color": "#8cc541",
    },
    {
      "values": [5],
      "background-color": "#d96c27",
    },
    {
      "values": [5],
      "background-color": "#ea2629",
    }
  ]
};
zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 140,
  width: 330
});

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"></div>
	</body>
</html>