JSFiddle - React, Tailwind, and code Playground
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chart-container">
FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var chordChart = new FusionCharts({
type: "chord",
renderAt: "chart-container",
id: "chord-chart",
width: "100%",
height: "500",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Different countries Gross Export",
"subcaption": "in 2017",
"nodeLabelPosition": "outside",
"showLegend": 0,
"theme": "fusion",
"mode": "post",
"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",
...