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",
startingAngle: "120"
},
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",
...