<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-4">
      <div class="demo-card">
        <div class="theme-control">
          <h5 class="mb-1">Themes</h5>
            <button id="fusion-theme-switcher" class="btn btn-sm btn-selected" onClick="handler.switchTheme('fusion')">Fusion</button>
            <button id="gammel-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('gammel')">Gammel</button>
            <button id="candy-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('candy')">Candy</button>
            <button id="umber-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('umber')">Umber</button>
        </div>
        <div class="legend-control mt-2">
          <h5 class="mb-1">Legend</h5>
          <button id="hide-legend-btn" class="btn btn-sm btn-selected" onClick="handler.legendVisibility(0)">Hide</button>
          <button id="show-legend-btn" class="btn btn-sm" onClick="handler.legendVisibility(1)">Show</button>
          <h5 class="mt-2 mb-1">Legend Position</h5>
          <button id="right-legend-btn" class="btn btn-sm btn-selected" onClick="handler.legendPosition('right')">Right</button>
          <button id="bottom-legend-btn" class="btn btn-sm" onClick="handler.legendPosition('bottom')">Bottom</button>
        </div>
        <div class="node-label mt-2">
          <h5 class="mb-1">Node Label Position</h5>
          <button id="outside-lblposition-btn" class="btn btn-sm btn-selected" onClick="handler.nodeLabelPosition('outside')">Outside</button>
          <button id="tangential-lblposition-btn" class="btn btn-sm" onClick="handler.nodeLabelPosition('tangential')">Tangential</button>
          <button id="inside-lblposition-btn" class="btn btn-sm" onClick="handler.nodeLabelPosition('inside')">Inside</button>
        </div>
        <div class="mode-control mt-2">
          <h5 class="mb-1">Mode</h5>
          <button id="pre-mode-btn" class="btn btn-sm" onClick="handler.changeMode('pre')">Pre</button>
          <button id="post-mode-btn" class="btn btn-sm btn-selected" onClick="handler.changeMode('post')">Post</button>
        </div>
        <div class="node-color-control mt-2">
          <h5 class="mb-1">Node Coloring</h5>
          <button id="dominant-colormode-btn" class="btn btn-sm btn-selected" onClick="handler.linkColorMode(1)">Dominant</button>
          <button id="subservient-colormode-btn" class="btn btn-sm" onClick="handler.linkColorMode(0)">Subservient</button>
        </div>
      </div>
    </div>
    <div class="col-8">
      <div id="chart-container"></div>
    </div>
  </div>
</div>
#chart-container {
  width: 100%;
  height: 500px;
}

.demo-card {
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
  background: #b3b3b3;
  width: 100%;
}

.btn-sm:hover {
  background: #212344;
  color: #FFFFFF;
}

.btn-selected {
  background: #212344;
  color: #FFFFFF;
}
const dataSource = {
  chart: {
    caption: "Different Countries by Gross Export",
    subCaption: "In 2017",
    theme: "fusion",
    nodelabelposition: "outside",
    showLegend: 0,
    legendPosition: "right",
    nodeThickness: 15
  },
  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
    }
  ]
};

FusionCharts.ready(function() {
  const demoChart = new FusionCharts({
    type: "chord",
    renderAt: "chart-container",
    id: "chord-demo-chart",
    width: "100%",
    height: "100%",
    dataFormat: "json",
    dataSource 
  }).render();
});

const handler = {
  switchTheme: function(val) {
    let fusionElem = document.getElementById("fusion-theme-switcher");
    let gammelElem = document.getElementById("gammel-theme-switcher");
    let candyElem = document.getElementById("candy-theme-switcher");
    let umberElem = document.getElementById("umber-theme-switcher");

    fusionElem.classList.remove("btn-selected");
    gammelElem.classList.remove("btn-selected");
    candyElem.classList.remove("btn-selected");
    umberElem.classList.remove("btn-selected");

    if (val === "fusion") {
      fusionElem.classList.add("btn-selected");
    } else if (val === "gammel") {
      gammelElem.classList.add("btn-selected");
    } else if (val === "candy") {
      candyElem.classList.add("btn-selected");
    } else if (val === "umber") {
      umberElem.classList.add("btn-selected");
    }

    FusionCharts.items["chord-demo-chart"].setChartAttribute("theme", val);
  },

  legendVisibility: function(val) {
    let hideLegendElem = document.getElementById("hide-legend-btn");
    let showLegendElem = document.getElementById("show-legend-btn");

    hideLegendElem.classList.remove("btn-selected");
    showLegendElem.classList.remove("btn-selected");

    if(val === 0) {
      hideLegendElem.classList.add("btn-selected");
    } else if(val === 1) {
      showLegendElem.classList.add("btn-selected");
    }

    FusionCharts.items["chord-demo-chart"].setChartAttribute("showLegend", val);
  },

  legendPosition: function(val) {
    let rightLegendElem = document.getElementById("right-legend-btn");
    let bottomLegendElem = document.getElementById("bottom-legend-btn");

    rightLegendElem.classList.remove("btn-selected");
    bottomLegendElem.classList.remove("btn-selected");

    if(val === "right") {
      rightLegendElem.classList.add("btn-selected");
    } else if(val === "bottom") {
      bottomLegendElem.classList.add("btn-selected");
    }

    FusionCharts.items["chord-demo-chart"].setChartAttribute("legendPosition", val);
  },

  nodeLabelPosition: function(val) {
    let outsideLabelElem = document.getElementById("outside-lblposition-btn");
    let tangentialLabelElem = document.getElementById("tangential-lblposition-btn");
    let insideLabelElem = document.getElementById("inside-lblposition-btn");

    outsideLabelElem.classList.remove("btn-selected");
    tangentialLabelElem.classList.remove("btn-selected");
    insideLabelElem.classList.remove("btn-selected");

    if(val === "outside") {
      outsideLabelElem.classList.add("btn-selected");
    } else if(val === "tangential") {
      tangentialLabelElem.classList.add("btn-selected");
    } else if(val === "inside") {
      insideLabelElem.classList.add("btn-selected");
    }

    FusionCharts.items["chord-demo-chart"].setChartAttribute("nodeLabelPosition", val);
  },

  changeMode: function(val) {
    let preElem = document.getElementById("pre-mode-btn");
    let postElem = document.getElementById("post-mode-btn");

    preElem.classList.remove("btn-selected");
    postElem.classList.remove("btn-selected");

    if(val === "pre") {
      preElem.classList.add("btn-selected");
    } else if(val === "post") {
      postElem.classList.add("btn-selected");
    }

    FusionCharts.items["chord-demo-chart"].setChartAttribute("mode", val);
  },

  linkColorMode: function(val) {
    let dominantElem = document.getElementById("dominant-colormode-btn");
    let subservientElem = document.getElementById("subservient-colormode-btn");

    dominantElem.classList.remove("btn-selected");
    subservientElem.classList.remove("subservientElem");

    if(val === 1) {
      dominantElem.classList.add("btn-selected");
    } else if(val === 0) {
      subservientElem.classList.add("subservientElem");
    }

    FusionCharts.items["chord-demo-chart"].setChartAttribute("linkColorByDominance", val);
  }
};

External CSS

  1. https://ds.fusioncharts.com/2.0.42/css/ds.css

External JavaScript

  1. https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js
  2. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js
  3. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.gammel.js
  4. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.candy.js
  5. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.umber.js