Quasi Bullet with Bar

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src='http://cdn.zingchart.com/zingchart.min.js'></script>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myJson = {
      "graphset": [{
        "type": "mixed",
        "background-color": "none",
        "scale-x": {
          "visible": 0
        },
        "scale-y": {
          "guide": {
            "visible": 0
          },
          "tick": {
            "line-color": "#A8A8A8",
            "line-width": 1
          },
          "line-width": 1,
          "line-color": "#A8A8A8",
          "values": "0:100:10",
          "format": "%v%",
          "markers": [{
            "type": "line",
            "range": 55
          }]
        },
        "tooltip": {
          "visible": 0
        },
        "plot": {
          "bars-overlap": "100%",
          "hover-state": {
            "visible": 0
          }
        },
        "series": [{
            "type": "bar",
            "values": [100],
            "gradient-colors": "#A8A8A8 #ffffff #A8A8A8",
            "gradient-stops": "0.1 0.5 1",
            "fill-angle": 180
          },
          {
            "type": "bar",
            "values": [65],
            "background-color": "#4f4f4f",
            "alpha": 0.7,
            "plot": {
              "animation": {
                "delay": 800,
                "effect": 11,
                "method": 0
              }
            }
          },
          {
            "type": "scatter",
            "values": [65],
            "marker": {
              "type": "rectangle",
              "height": 2,
              "width": "44%"
            }
          }
        ]
      }]
    };
    zingchart.render({
      id: 'myChart',
      data: myJson,
      height: 400,
      width: 200
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src='http://cdn.zingchart.com/zingchart.min.js'></script>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>

var myJson = {
  "graphset": [{
    "type": "mixed",
    "background-color": "none",
    "scale-x": {
      "visible": 0
    },
    "scale-y": {
      "guide": {
        "visible": 0
      },
      "tick": {
        "line-color": "#A8A8A8",
        "line-width": 1
      },
      "line-width": 1,
      "line-color": "#A8A8A8",
      "values": "0:100:10",
      "format": "%v%",
      "markers": [{
        "type": "line",
        "range": 55
      }]
    },
    "tooltip": {
      "visible": 0
    },
    "plot": {
      "bars-overlap": "100%",
      "hover-state": {
        "visible": 0
      }
    },
    "series": [{
        "type": "bar",
        "values": [100],
        "gradient-colors": "#A8A8A8 #ffffff #A8A8A8",
        "gradient-stops": "0.1 0.5 1",
        "fill-angle": 180
      },
      {
        "type": "bar",
        "values": [65],
        "background-color": "#4f4f4f",
        "alpha": 0.7,
        "plot": {
          "animation": {
            "delay": 800,
            "effect": 11,
            "method": 0
          }
        }
      },
      {
        "type": "scatter",
        "values": [65],
        "marker": {
          "type": "rectangle",
          "height": 2,
          "width": "44%"
        }
      }
    ]
  }]
};
zingchart.render({
  id: 'myChart',
  data: myJson,
  height: 400,
  width: 200
});