<div class="container-fluid">
  <div class="card shadow mt-2 mb-2 mr-2 ml-2">
    <div class="card-body">
      <div id="chart-container"></div>
      <div class="controller">
        <div id="msg">
          <p id="control-parent-msg">
            How do you want to configure your legend position:
          </p>
          <input
            type="radio"
            name="position"
            value="relative"
            id="radio1"
            checked
          />
          Relative
          <input
            type="radio"
            name="position"
            value="absolute"
            id="radio2"
            class="ml-1"
          />
          Absolute
        </div>
        <div id="control-wrapper-abs">
          X position:
          <input
            type="number"
            id="legendXPosition"
            name="xPosition"
            min="0"
            max="600"
            value="100"
          />
          Y position:
          <input
            type="number"
            id="legendYPosition"
            name="yPosition"
            min="0"
            max="400"
            value="10"
          />
        </div>
        <div id="control-wrapper-rel" class="mt-1">
          <div id="option-label">Choose legend position:</div>
          <select id="option-controller">
            <option value="0" selected>Bottom</option>
            <option value="1">Right</option>
            <option value="2">Top</option>
            <option value="3">Left</option>
            <option value="4">Top Left</option>
            <option value="5">Top Right</option>
            <option value="6">Bottom Left</option>
            <option value="7">Bottom Right</option>
            <option value="8">Left Top</option>
            <option value="9">Left Bottom</option>
            <option value="10">Right Top</option>
            <option value="11">Right Bottom</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

.shadow {
  text-align: center !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 6px 14px 0 rgba(33, 35, 68, 0.09) !important;
}

#chart-container {
  width: 100%;
  height: 450px;
}

.control-wrapper {
  text-align: center !important;
}

#control-wrapper-abs {
  display: none;
}

#control-wrapper-rel {
  display: block;
}

#option-label {
  font-weight: 600;
  color: black;
  display: inline;
}

#option-controller {
  width: 250px;
  margin-top: 5px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(62, 57, 107, 0.05);
  background-image: none;
  overflow: hidden;
  position: relative;
  background-clip: padding-box;
  background-color: #ffffff;
  border: 1px solid #dadae4;
  border-radius: 0.5rem;
  color: #434456;
  font-size: 15px;
  line-height: 1.5;
  padding: 1rem 1.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiDBILGzbCYdPeAAAAcElEQVQ4y+3TOQ6AIBBA0e9BwO1WXt0loAfRAgs0KDCVJvypXzOZgdJPqhhQQrtBzcIumJUeZPykEu5RAJ3B7ZXmcEsX2p5mltIU/kJjPEIdnx5om3I5KsATaYibdHrnmdTnAur4iKGRUMel71r6VgcdldK8SuppHgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0xOFQxMDoyNzo1NCswMTowMAXwHqgAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMThUMTA6Mjc6NTQrMDE6MDB0raYUAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==)
    95%/12px no-repeat #fff;
  padding-right: 20px;
  text-transform: none;
}

#option-controller:focus {
  outline: none;
}

#radioDiv1 {
  display: inline;
  padding: 10px;
}

#control-parent-msg {
  display: inline;
  padding: 10px;
}

#legendXPosition,
#legendYPosition {
  background-color: #ffffff;
  border: 1px solid #dadae4;
  border-radius: 0.5rem;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(62, 57, 107, 0.05);
  margin: 20px;
  padding-left: 2px;
}

const dataSource = {
  chart: {
    caption: "US Population Distribution by Gender",
    subCaption: "State wise Male vs Female",
    theme: "fusion",
    showValues: "0",
    numberSuffix: "%",
    legendPosition: "bottom",
    plottooltext:
      "<b>Group : $seriesName</b>{br}Category: $label{br}Value: $dataValue</div>"
  },
  categories: [
    {
      category: [
        {
          label: "North Dakota"
        },
        {
          label: "Alabama"
        },
        {
          label: "Alaska"
        },
        {
          label: "Florida"
        },
        {
          label: "California"
        }
      ]
    }
  ],
  dataset: [
    {
      seriesname: "Male",
      data: [
        {
          value: "52"
        },
        {
          value: "48"
        },
        {
          value: "51"
        },
        {
          value: "48"
        },
        {
          value: "50"
        }
      ]
    },
    {
      seriesname: "Female",
      data: [
        {
          value: "48"
        },
        {
          value: "52"
        },
        {
          value: "49"
        },
        {
          value: "52"
        },
        {
          value: "50"
        }
      ]
    }
  ]
};
FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "mscolumn2d",
    renderAt: "chart-container",
    id: "demoChart",
    width: "100%",
    height: "100%",
    dataFormat: "json",
    dataSource: dataSource
  }).render();

  const chartObj = FusionCharts.items["demoChart"];

  document.getElementById("radio2").addEventListener("click", function() {
    document.getElementById("control-wrapper-rel").style.display = "none";
    document.getElementById("control-wrapper-abs").style.display = "block";
    chartObj.setChartAttribute("legendPosition", "absolute");
    chartObj.setChartAttribute("legendXPosition", 100);
    chartObj.setChartAttribute("legendYPosition", 10);
  });

  document.getElementById("radio1").addEventListener("click", function() {
    document.getElementById("control-wrapper-rel").style.display = "block";
    document.getElementById("control-wrapper-abs").style.display = "none";
    chartObj.setChartAttribute("legendPosition", "bottom");
  });

  document
    .getElementById("legendXPosition")
    .addEventListener("input", function(evt) {
      chartObj.setChartAttribute("legendXPosition", this.value);
    });

  document
    .getElementById("legendYPosition")
    .addEventListener("input", function(evt) {
      chartObj.setChartAttribute("legendYPosition", this.value);
    });
  // document.getElementById('legendXPosition').addEventListener('change',function(){

  // })

  document.getElementById("option-controller").onchange = changeEventHandler;

  function changeEventHandler(event) {
    switch (parseInt(event.target.value)) {
      case 0:
        chartObj.setChartAttribute("legendPosition", "bottom");
        break;
      case 1:
        chartObj.setChartAttribute("legendPosition", "right");
        break;
      case 2:
        chartObj.setChartAttribute("legendPosition", "top");
        break;
      case 3:
        chartObj.setChartAttribute("legendPosition", "left");
        break;
      case 4:
        chartObj.setChartAttribute("legendPosition", "top-left");
        break;
      case 5:
        chartObj.setChartAttribute("legendPosition", "top-right");
        break;
      case 6:
        chartObj.setChartAttribute("legendPosition", "bottom-left");
        break;
      case 7:
        chartObj.setChartAttribute("legendPosition", "bottom-right");
        break;
      case 8:
        chartObj.setChartAttribute("legendPosition", "left-top");
        break;
      case 9:
        chartObj.setChartAttribute("legendPosition", "left-bottom");
        break;
      case 10:
        chartObj.setChartAttribute("legendPosition", "right-top");
        break;
      case 11:
        chartObj.setChartAttribute("legendPosition", "right-bottom");
        break;
      default:
        console.log("Unexpected Input");
        break;
    }
  }
});