static column

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    #myChart {
      max-width: 700;
    }
  </style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      layout: "h",
      graphset: [{
          "type": "null",
          "labels": [{
            "text": "This is a clickable reference bar",
            "font-size": "24",
            "width": 100,
            "x": 10,
            "y": 90,
            "wrap-text": true
          }],
          "shapes": [{
              "type": "rect",
              width: 50,
              height: 275,
              "background-color": "red",
              "size": 75,
              "x": "49%",
              "y": "49%",
              "alpha": "0.5",
              "hover-state": {
                "alpha": "0.6"
              },
              "label": {
                "text": "90",
                "color": "#fff",
                "font-size": "24px"
              },
              "url": "http://www.zingchart.com/", //dont have to make this clickable
              "target": "_blank" //can even make it clickable!
            },
            {
              "type": "pie",
              "alpha": .8,
              "shadow": 1,
              "background-color": "red",
              "x": 110,
              "y": 80,
              "size": 50,
              "slice": 40,
              "angle-start": 180,
              "angle-end": 295,
            },
            {
              "type": "triangle",
              "alpha": .8,
              "shadow": 1,
              "background-color": "red",
              "x": 137,
              "y": 44,
              "size": 15,
              "angle": 115
            }
          ]
        },
        {
          type: "bar",
          width: "85%",
          x: "25%",
          y: 0,
          marginLeft: "0px",
          marginRight: "30px",
          scaleY: {
            visible: true //toggle this on or off
          },
          scaleX: {
            label: {
              text: "x-axis label"
            }
          },
          title: {
            text: "This is your graph"
          },
          series: [{
            values: [35, 42, 67, 89, 25, 34, 67, 85]
          }]
        },
      ]

    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 700
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

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

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

</html>

#myChart {
  max-width: 700;
}

var myConfig = {
  layout: "h",
  graphset: [{
      "type": "null",
      "labels": [{
        "text": "This is a clickable reference bar",
        "font-size": "24",
        "width": 100,
        "x": 10,
        "y": 90,
        "wrap-text": true
      }],
      "shapes": [{
          "type": "rect",
          width: 50,
          height: 275,
          "background-color": "red",
          "size": 75,
          "x": "49%",
          "y": "49%",
          "alpha": "0.5",
          "hover-state": {
            "alpha": "0.6"
          },
          "label": {
            "text": "90",
            "color": "#fff",
            "font-size": "24px"
          },
          "url": "http://www.zingchart.com/", //dont have to make this clickable
          "target": "_blank" //can even make it clickable!
        },
        {
          "type": "pie",
          "alpha": .8,
          "shadow": 1,
          "background-color": "red",
          "x": 110,
          "y": 80,
          "size": 50,
          "slice": 40,
          "angle-start": 180,
          "angle-end": 295,
        },
        {
          "type": "triangle",
          "alpha": .8,
          "shadow": 1,
          "background-color": "red",
          "x": 137,
          "y": 44,
          "size": 15,
          "angle": 115
        }
      ]
    },
    {
      type: "bar",
      width: "85%",
      x: "25%",
      y: 0,
      marginLeft: "0px",
      marginRight: "30px",
      scaleY: {
        visible: true //toggle this on or off
      },
      scaleX: {
        label: {
          text: "x-axis label"
        }
      },
      title: {
        text: "This is your graph"
      },
      series: [{
        values: [35, 42, 67, 89, 25, 34, 67, 85]
      }]
    },
  ]

};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: 700
});