Vertical Bullet

<!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": "bullet",
        "background-color": "none",
        "plot": {
          "hover-state": {
            "visible": 0
          },
          "goal": {
            "background-color": "#c41919",
            "width": 60
          }
        },
        "plotarea": {
          "margin-right": 20
        },
        "scale-x": {
          "visible": 0
        },
        "scale-y": {
          "guide": {
            "visible": 0
          },
          "markers": [{
            "type": "area",
            "range": [0, 100],
            "gradient-colors": "#A8A8A8 #ffffff #A8A8A8",
            "gradient-stops": "0.1 0.5 1",
            "fill-angle": 180
          }],
          "tick": {
            "line-color": "#A8A8A8",
            "line-width": 1
          },
          "line-width": 1,
          "line-color": "none",
          "values": "0:100:10",
          "format": "%v%"
        },
        "tooltip": {
          "visible": 0
        },
        "series": [{
          "values": [65],
          "goals": [65],
          "background-color": "#4f4f4f #a8a8a8",
          "fill-angle": 80,
          "bar-width": 80
        }]
      }]
    };
    zingchart.render({
      id: 'myChart',
      data: myJson,
      height: 400,
      width: 150
    });
  </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": "bullet",
    "background-color": "none",
    "plot": {
      "hover-state": {
        "visible": 0
      },
      "goal": {
        "background-color": "#c41919",
        "width": 60
      }
    },
    "plotarea": {
      "margin-right": 20
    },
    "scale-x": {
      "visible": 0
    },
    "scale-y": {
      "guide": {
        "visible": 0
      },
      "markers": [{
        "type": "area",
        "range": [0, 100],
        "gradient-colors": "#A8A8A8 #ffffff #A8A8A8",
        "gradient-stops": "0.1 0.5 1",
        "fill-angle": 180
      }],
      "tick": {
        "line-color": "#A8A8A8",
        "line-width": 1
      },
      "line-width": 1,
      "line-color": "none",
      "values": "0:100:10",
      "format": "%v%"
    },
    "tooltip": {
      "visible": 0
    },
    "series": [{
      "values": [65],
      "goals": [65],
      "background-color": "#4f4f4f #a8a8a8",
      "fill-angle": 80,
      "bar-width": 80
    }]
  }]
};
zingchart.render({
  id: 'myChart',
  data: myJson,
  height: 400,
  width: 150
});