<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="infobox">
        <p id="message">Click on a node or hover over link to know more.</p>
      </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;
}

.infobox {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #dee2f5;
  height: 65px;
  padding-top: 20px;
  border-radius: 3px;
  color: #0d142e;
  font-weight: 500;
  font-size: 1.75rem;
}

new FusionCharts({
  type: "chord",
  renderAt: "chart-container",
  id: "demo-chart",
  width: "100%",
  height: "100%",
  dataFormat: "json",
  dataSource: {
    chart: {
      caption: "Different countries Gross Export",
      subcaption: "in 2017",
      nodelabelposition: "outside",
      showlegend: 0,
      theme: "fusion",
      mode: "post",
      linkcolorbydominance: "1",
      animation: "0",
      enableToggle: 0
    },
    nodes: [
      {
        label: "India"
      },
      {
        label: "Canada"
      },
      {
        label: "USA"
      },
      {
        label: "China"
      },
      {
        label: "UK"
      },
      {
        label: "UAE"
      }
    ],
    links: [
      {
        from: "India",
        to: "Canada",
        value: 3040000000
      },
      {
        from: "India",
        to: "USA",
        value: 46500000000
      },
      {
        from: "India",
        to: "China",
        value: 12700000000
      },
      {
        from: "India",
        to: "UK",
        value: 8860000000
      },
      {
        from: "India",
        to: "UAE",
        value: 27500000000
      },
      {
        from: "Canada",
        to: "India",
        value: 24490000000
      },
      {
        from: "Canada",
        to: "USA",
        value: 310000000000
      },
      {
        from: "Canada",
        to: "China",
        value: 18300000000
      },
      {
        from: "Canada",
        to: "UK",
        value: 9320000000
      },
      {
        from: "Canada",
        to: "UAE",
        value: 1830000000
      },
      {
        from: "USA",
        to: "India",
        value: 24100000000
      },
      {
        from: "USA",
        to: "Canada",
        value: 277000000000
      },
      {
        from: "USA",
        to: "China",
        value: 132000000000
      },
      {
        from: "USA",
        to: "UK",
        value: 53600000000
      },
      {
        from: "USA",
        to: "UAE",
        value: 19900000000
      },
      {
        from: "China",
        to: "India",
        value: 68100000000
      },
      {
        from: "China",
        to: "Canada",
        value: 51900000000
      },
      {
        from: "China",
        to: "USA",
        value: 480000000000
      },
      {
        from: "China",
        to: "UK",
        value: 56800000000
      },
      {
        from: "China",
        to: "UAE",
        value: 45800000000
      },
      {
        from: "UK",
        to: "Canada",
        value: 62400000000
      },
      {
        from: "UK",
        to: "USA",
        value: 5780000000
      },
      {
        from: "UK",
        to: "India",
        value: 518000000
      },
      {
        from: "UK",
        to: "China",
        value: 21200000000
      },
      {
        from: "UK",
        to: "UAE",
        value: 9270000000
      },
      {
        from: "UAE",
        to: "India",
        value: 20500000000
      },
      {
        from: "UAE",
        to: "Canada",
        value: 299000000
      },
      {
        from: "UAE",
        to: "USA",
        value: 7470000000
      },
      {
        from: "UAE",
        to: "China",
        value: 1160000000
      },
      {
        from: "UAE",
        to: "UK",
        value: 3550000000
      }
    ]
  }
}).render();

let messageElem = document.getElementById("message");

FusionCharts.items["demo-chart"].addEventListener("dataPlotClick", function (
  ev,
  obj
) {
  messageElem.innerHTML = " ";
  messageElem.innerHTML = `You clicked on <b>${obj.label}</b> with value <b>${obj.displayValue}</b>.`;
});

FusionCharts.items["demo-chart"].addEventListener("linkRollOver", function (
  ev,
  obj
) {
  messageElem.innerHTML = " ";
  messageElem.innerHTML = `You hovered over link between <b>${obj.linkedNodes[0]}</b> and <b>${obj.linkedNodes[1]}</b> with values <b>${obj.dominantFlowValue} (Dominant Flow Value)</b> and <b>${obj.subservientFlowValue} (Subservient Flow Value)</b> respectively.`;
});

FusionCharts.items["demo-chart"].addEventListener("linkRollOut", function (
  ev,
  obj
) {
  messageElem.innerHTML = " ";
  messageElem.innerHTML = "Click on a node or hover over link to know more.";
});