<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-8">
      <div id="chart-container"></div>
    </div>
    <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="orientation-control mt-2">
          <h5 class="mb-1">Orientation</h5>
          <button id="horizontal-orientation-switcher" type="button" class="btn btn-sm btn-selected" onClick="handler.switchOrientation('horizontal')">Horizontal</button>
          <button id="vertical-orientation-switcher" type="button" class="btn btn-sm" onClick="handler.switchOrientation('vertical')">Vertical</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" onClick="handler.legendPosition('right')">Right</button>
          <button id="bottom-legend-btn" class="btn btn-sm btn-selected" onClick="handler.legendPosition('bottom')">Bottom</button>
        </div>
        <div class="node-label mt-2">
          <h5 class="mb-1">Node Label Position</h5>
          <button id="start-nodelbl-btn" class="btn btn-sm" onClick="handler.nodeLabelPosition('start')">Start</button>
          <button id="inside-nodelbl-btn" class="btn btn-sm btn-selected" onClick="handler.nodeLabelPosition('inside')">Inside</button>
          <button id="end-nodelbl-btn" class="btn btn-sm" onClick="handler.nodeLabelPosition('end')">End</button>
        </div>
        <div class="link-color mt-2">
          <h5 class="mb-1">Link Color</h5>
          <button id="source-color-btn" class="btn btn-sm btn-selected" onClick="handler.linkColorMode('source')">Source</button>
          <button id="target-color-btn" class="btn btn-sm" onClick="handler.linkColorMode('target')">Target</button>
          <button id="blend-color-btn" class="btn btn-sm" onClick="handler.linkColorMode('blend')">Blend</button>
          <button id="custom-color-btn" class="btn btn-sm" onClick="handler.linkColorMode('#CCCCCC')">Custom</button>
        </div> 
      </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: "Bilateral Trade Volume, 2013",
    theme: "fusion",
    showLegend: 0,
    legendPosition: "bottom"
  },
  nodes: [
    {
      label: "Netherlands"
    },
    {
      label: "Canada"
    },
    {
      label: "Belgium"
    },
    {
      label: "Italy"
    },
    {
      label: "Mexico"
    },
    {
      label: "Russia"
    },
    {
      label: "Spain"
    },
    {
      label: "South Korea"
    },
    {
      label: "Germany"
    },
    {
      label: "China"
    },
    {
      label: "European Union"
    },
    {
      label: "Japan"
    },
    {
      label: "United Kingdom"
    },
    {
      label: "United States"
    },
    {
      label: "France"
    },
    {
      label: "Hong Kong"
    },
    {
      label: "Switzerland"
    },
    {
      label: "Austria"
    },
    {
      label: "Sweden"
    }
  ],
  links: [
    {
      from: "Netherlands",
      to: "European Union",
      value: 798744
    },
    {
      from: "Germany",
      to: "European Union",
      value: 1468990
    },
    {
      from: "European Union",
      to: "France",
      value: 745931
    },
    {
      from: "European Union",
      to: "United States",
      value: 660541
    },
    {
      from: "Canada",
      to: "United States",
      value: 594546
    },
    {
      from: "Belgium",
      to: "European Union",
      value: 628796
    },
    {
      from: "China",
      to: "Hong Kong",
      value: 400571
    },
    {
      from: "China",
      to: "United States",
      value: 526454
    },
    {
      from: "European Union",
      to: "United Kingdom",
      value: 520318
    },
    {
      from: "China",
      to: "European Union",
      value: 560536
    },
    {
      from: "Italy",
      to: "European Union",
      value: 539556
    },
    {
      from: "Mexico",
      to: "United States",
      value: 492715
    },
    {
      from: "Russia",
      to: "European Union",
      value: 385778
    },
    {
      from: "Spain",
      to: "European Union",
      value: 365191
    },
    {
      from: "China",
      to: "Japan",
      value: 312062
    },
    {
      from: "European Union",
      to: "Switzerland",
      value: 328609
    },
    {
      from: "South Korea",
      to: "China",
      value: 229073
    },
    {
      from: "European Union",
      to: "Austria",
      value: 244913
    },
    {
      from: "Japan",
      to: "United States",
      value: 206091
    },
    {
      from: "European Union",
      to: "Sweden",
      value: 204849
    },
    {
      from: "Germany",
      to: "United States",
      value: 184287
    }
  ]
};

FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "sankey",
    renderAt: "chart-container",
    id: "sankey-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["sankey-demo-chart"].setChartAttribute("theme", val);
  },

  switchOrientation: function(val) {
    let horizontalElem = document.getElementById(
      "horizontal-orientation-switcher"
    );
    let verticalElem = document.getElementById("vertical-orientation-switcher");

    horizontalElem.classList.remove("btn-selected");
    verticalElem.classList.remove("btn-selected");

    if (val === "horizontal") {
      horizontalElem.classList.add("btn-selected");
    } else if (val === "vertical") {
      verticalElem.classList.add("btn-selected");
    }

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

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

    showElem.classList.remove("btn-selected");
    hideElem.classList.remove("btn-selected");

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

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

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

    rightElem.classList.remove("btn-selected");
    bottomElem.classList.remove("btn-selected");

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

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

  nodeLabelPosition: function(val) {
    let startPosElem = document.getElementById("start-nodelbl-btn");
    let insidePosElem = document.getElementById("inside-nodelbl-btn");
    let endPosElem = document.getElementById("end-nodelbl-btn");

    startPosElem.classList.remove("btn-selected");
    insidePosElem.classList.remove("btn-selected");
    endPosElem.classList.remove("btn-selected");

    if(val === "start") {
      startPosElem.classList.add("btn-selected");
    } else if(val === "inside") {
      insidePosElem.classList.add("btn-selected");
    } else if(val === "end") {
      endPosElem.classList.add("btn-selected");
    }

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

  linkColorMode: function(val) {
    let sourceColorElem = document.getElementById("source-color-btn");
    let targetColorElem = document.getElementById("target-color-btn");
    let blendColorElem = document.getElementById("blend-color-btn");
    let customColorElem = document.getElementById("custom-color-btn");

    sourceColorElem.classList.remove("btn-selected");
    targetColorElem.classList.remove("btn-selected");
    blendColorElem.classList.remove("btn-selected");
    customColorElem.classList.remove("btn-selected");

    if(val === "source") {
      sourceColorElem.classList.add("btn-selected");
    } else if(val === "target") {
      targetColorElem.classList.add("btn-selected");
    } else if (val === "blend") {
      blendColorElem.classList.add("btn-selected");
    } else if (val === "#CCCCCC") {
      customColorElem.classList.add("btn-selected");
    }

    FusionCharts.items["sankey-demo-chart"].setChartAttribute(
      "linkColor",
      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